DevExtreme jQuery/JS - 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 | Bower Package | npm Package

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!");
        }
    });
});

DevExtreme jQuery/JS - Create and Configure a Widget

See Also