UI Widgets Button

A button widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The main purpose of the dxButton widget is to perform a specified action when the button is clicked.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxButton widget using the Knockout approach.

HTML
<div data-bind="dxButton: { text: 'Click me', clickAction: buttonClicked }"></div>

Declare a function that handles the button click and pass it to the clickAction configuration option.

JavaScript
var buttonClicked = function(e){
    alert("The button is clicked");
};
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
Show Example:
jQuery
<div class="button" data-bind="dxButton:{text:'Click me', clickAction: buttonClicked}"></div>
buttonClicked = function(){
    DevExpress.ui.notify("The button is clicked", "success", 1000);
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

Configuration

An object defining configuration options for the dxButton widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.