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.
<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 () { $("#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.
$(function () { $("#buttonContainer").dxButton({ text: "Click me!", onClick: function () { alert("Hello world!"); } }); });
See Also
- API Reference.WidgetName.Configuration, for example, API Reference.Button.Configuration
- Get and Set Options - jQuery
If you have technical questions, please create a support ticket in the DevExpress Support Center.