Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Create and Configure a Widget

IMPORTANT
According to Stack Overflow Trends, MVVM frameworks such as Angular, Vue, and React became more popular than Knockout in recent years. DevExtreme will continue to support Knockout but we recommend that you use one of these frameworks in your new projects.

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