DevExtreme Vue - Change Options

All operations with widget options are carried out through the scope properties these options are bound to. To bind a widget option to a scope property, use the bindingOptions object as shown in the following code. Note that the scope property name in this object is enclosed in quotes.

<div ng-controller="Controller">
    <div dx-check-box="{
        bindingOptions: {
            value: 'checkBoxValue'
        }
    }"></div>
</div>

function Controller ($scope) {
    $scope.checkBoxValue = true;
}

Now, if you change the checkBoxValue scope property in code, the CheckBox will receive the changes. And vice versa, if an end user selects the CheckBox in the UI, the checkBoxValue scope property will be updated.

If you bind a widget to a collection, the widget gets updated only when an object is added to or removed from this collection. To make the widget listen for changes even in the fields of any object in the collection, configure the bindingOptions object as follows.

<div ng-controller="Controller">
    <div dx-chart="{
        bindingOptions: {
            dataSource: {
                <!-- Enables deep tracking of changes -->
                deep: true,
                <!-- Specifies which scope property to track changes in -->
                dataPath: 'fruitsData'
            }
        },
        series: { argumentField: 'fruit', valueField: 'total' }
    }"></div>
</div>

function Controller ($scope) {
    $scope.fruitsData = [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ];
}

The code above forces the widget to use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the widget's peformance.

Watch Video

See Also

• API Reference.WidgetName.Configuration, for example, API Reference.Chart.Configuration
• Create and Configure a Widget