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

Create and Configure a Widget

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

All DevExtreme UI components can be created on a page in the same manner - using a UI component-specific Knockout binding. To create, for example, the dxChart UI component, 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 UI component, add properties to the object passed to the UI component binding. Note that these properties mirror the properties of the UI component.

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 UI component property with the value of a view model property. For example, the following code declares the fruitsData property within a view model. The dataSource property 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 UI component properties in the view model and pass it to the UI component 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