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

Create and Configure a Widget

You should be familiar with basic concepts and patterns of jQuery to use this documentation. If you are not, please refer to the jQuery documentation for a getting-started tutorial first.

Make sure you linked all the required resources before creating 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.

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

$(function () {

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.

$(function () {
        text: "Click me!",
        onClick: function () {
            alert("Hello world!");
See Also