Create and Configure a Widget

Any DevExtreme widget must be placed in a container. This role is played by a <div> HTML element. Add a <div> to the <body> tag of your page. Make sure that this <div> has the id attribute specified.

HTML
<div id="buttonContainer"></div>

DevExtreme supplies a jQuery plugin for each widget. To create, for example, the Button widget within the buttonContainer element, use the dxButton() plugin as the following code shows.

JavaScript
$(function () {
    $("#buttonContainer").dxButton();
});

To configure a widget, pass an object to the plugin as shown in the following code. Note that the properties of this object mirror the options of the widget.

JavaScript
$(function () {
    $("#buttonContainer").dxButton({
        text: "Click me!",
        onClick: function () {
            alert("Hello world!");
        }
    });
});
See Also