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.