DevExtreme jQuery - 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 | 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