DevExtreme jQuery/JS - Create and Configure a Widget
Make sure you linked all the required resources before creating a UI component:
- Link Resources: Local Scripts | CDN Services | NuGet Package | npm Package
For operating with AngularJS, DevExtreme includes an AngularJS module registered under the name "dx". Add it to the list of dependencies for your application module.
angular.module('myApp', [ 'dx' ]);
The "dx" module contains directives that you use to create any DevExtreme UI component. For instance, the dx-button
directive creates a Button UI component, dx-range-slider
creates a RangeSlider, etc. Note that all DevExtreme directives satisfy the AngularJS normalization rules: dx-UI-component-name.
Any DevExtreme directive should be associated with a <div>
HTML element, which plays the role of a container for the UI component. For example, the following code creates a Chart UI component in a <div>
container.
<div dx-chart=""></div>
To configure a UI component, pass an object to the UI component directive. Note that the properties of this object mirror the properties of the UI component.
<div dx-chart="{ dataSource: [ { fruit: 'Oranges', total: 10 }, { fruit: 'Apples', total: 15 }, { fruit: 'Bananas', total: 9 } ], series: { argumentField: 'fruit', valueField: 'total' } }"></div>
You can initialize UI component properties with the value of a scope property. For example, the following code declares the fruitsData
property within the scope of a controller. The dataSource property of a dxChart is initialized with the value of this property.
function Controller ($scope) { $scope.fruitsData = [ { fruit: 'Oranges', total: 10 }, { fruit: 'Apples', total: 15 }, { fruit: 'Bananas', total: 9 } ]; }
<div ng-controller="Controller"> <div dx-chart="{ dataSource: fruitsData, series: { argumentField: 'fruit', valueField: 'total' } }"></div> </div>
As an alternative, you can declare the whole object of UI component properties in the scope and pass it to the UI component directive.
function Controller($scope) { $scope.chartOptions = { dataSource: [ { fruit: 'Oranges', total: 10 }, { fruit: 'Apples', total: 15 }, { fruit: 'Bananas', total: 9 } ], series: { argumentField: 'fruit', valueField: 'total' } }; }
<div ng-controller="Controller"> <div dx-chart="chartOptions"></div> </div>
See Also
- API Reference.WidgetName.Configuration, for example, API Reference.Chart.Configuration
- Change Options