A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Change Options

All operations with UI component properties are carried out through the scope properties these properties are bound to. To bind a UI component property 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.

HTML
<div ng-controller="Controller">
    <div dx-check-box="{
        bindingOptions: {
            value: 'checkBoxValue'
        }
    }"></div>
</div>
JavaScript
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 UI component to a collection, the UI component gets updated only when an object is added to or removed from this collection. To make the UI component listen for changes even in the fields of any object in the collection, configure the bindingOptions object as follows.

HTML
<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>
JavaScript
function Controller ($scope) {
    $scope.fruitsData = [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ];
}

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

NOTE
We strongly do not recommend binding a UI component to the DevExtreme DataSource using the bindingOptions object. The DataSource contains internal circular links that get updated during its lifetime. Tracking changes in them by means of the AngularJS Framework may lead to unexpected results. Instead of using the bindingOptions object, simply assign the scope property with the DataSource to the dataSource property of the UI component. If you nevertheless decided to use the bindingOptions object, set its deep field to false explicitly.
See Also