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
All DevExtreme widgets can be created on a page in the same manner - using a widget-specific Knockout binding. To create, for example, the dxChart widget, add a <div>
element to the <body>
tag of your page and use the dxChart
binding as the following code shows.
<div data-bind="dxChart: { }"></div>
To configure a widget, add properties to the object passed to the widget binding. Note that these properties mirror the options of the widget.
<div data-bind="dxChart: { dataSource: [ { fruit: 'Oranges', total: 10 }, { fruit: 'Apples', total: 15 }, { fruit: 'Bananas', total: 9 } ], series: { argumentField: 'fruit', valueField: 'total' } }"></div>
You can initialize a widget option with the value of a view model property. For example, the following code declares the fruitsData
property within a view model. The dataSource option of the Chart is initialized with the value of this property.
var viewModel = { fruitsData: [ { fruit: 'Oranges', total: 10 }, { fruit: 'Apples', total: 15 }, { fruit: 'Bananas', total: 9 } ] }; ko.applyBindings(viewModel);
<div data-bind="dxChart: { dataSource: fruitsData, series: { argumentField: 'fruit', valueField: 'total' } }"></div>
As an alternative, you can declare the whole object of widget options in the view model and pass it to the widget binding.
var viewModel = { chartOptions: { dataSource: [ { fruit: 'Oranges', total: 10 }, { fruit: 'Apples', total: 15 }, { fruit: 'Bananas', total: 9 } ], series: { argumentField: 'fruit', valueField: 'total' } } }; ko.applyBindings(viewModel);
<div data-bind="dxChart: chartOptions"></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.