DevExtreme Angular - Create and Configure a Widget

Make sure you linked all the required resources before creating a widget:

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.

HTML
  • <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.

HTML
  • <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.

JavaScript
  • var viewModel = {
  • fruitsData: [
  • { fruit: 'Oranges', total: 10 },
  • { fruit: 'Apples', total: 15 },
  • { fruit: 'Bananas', total: 9 }
  • ]
  • };
  •  
  • ko.applyBindings(viewModel);
HTML
  • <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.

JavaScript
  • var viewModel = {
  • chartOptions: {
  • dataSource: [
  • { fruit: 'Oranges', total: 10 },
  • { fruit: 'Apples', total: 15 },
  • { fruit: 'Bananas', total: 9 }
  • ],
  • series: { argumentField: 'fruit', valueField: 'total' }
  • }
  • };
  •  
  • ko.applyBindings(viewModel);
HTML
  • <div data-bind="dxChart: chartOptions"></div>
See Also