DevExtreme jQuery/JS - Create and Configure a Widget
Make sure you linked all the required resources before creating a widget:
- Link Resources: Local Scripts | CDN Services | NuGet Package | Bower 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 widget. For instance, the dx-button
directive creates a Button widget, dx-range-slider
creates a RangeSlider, etc. Note that all DevExtreme directives satisfy the AngularJS normalization rules: dx-widget-name.
Any DevExtreme directive should be associated with a <div>
HTML element, which plays the role of a container for the widget. For example, the following code creates a Chart widget in a <div>
container.
<div dx-chart=""></div>
To configure a widget, pass an object to the widget directive. Note that the properties of this object mirror the options of the widget.
<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 widget options with the value of a scope property. For example, the following code declares the fruitsData
property within the scope of a controller. The dataSource option 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 widget options in the scope and pass it to the widget 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.