DevExtreme React - 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.

<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 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.

<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 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.

See Also

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