React Button Props

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

You can configure this option in an ASP.NET MVC Control as follows:

@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

This option accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

This option accepts the name of an icon from the built-in icon library, a path to the icon image, or a CSS class of an icon stored in an external icon library. For information on using external icon libraries, refer to the Icon Library article.

View Demo

Assign a function to perform a custom action when the widget is clicked.

When using DevExtreme SPA Framework, you can navigate to a specific URL on click. For this, assign this URL or its anchor part (#) directly to this option.

To validate the editors that are related to the validation group specified for this button, use the validationGroup field of the object passed as the event handler's parameter. The validationGroup object has the following structure.

• group
  The name or object of the validation group that is assigned to the button's validationGroup option.
• validators
  An array of Validator widgets that are included to the validation group.
• validate()
  The method that allows you to validate the widgets included in the validation group.
• validated
  The event that occurs after the group is validated. You can attach/detach a handler using the on(eventName, eventHandler)/off(eventName) methods of the group.

You cannot access widget elements in this handler because it is executed before they are ready. Use the onContentReady handler instead.

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

See Also

• Customize the Appearance
• Custom Templates

DevExtreme provides the following button types.

When using a widget as an ASP.NET MVC Control, specify this option using the ButtonType enum. This enum accepts the following values: Normal, Default, Back, Danger and Success.

View Demo

If you set this option to true, a click on the button will validate and submit the HTML form in which the button is nested, no further configuration required. Note that the click event handler will be executed first.

View Demo

When using a button to validate several editors on a page, the button must "know" in which validation group these editors are located. If the Knockout or AngularJS approach is used, add the button to the div element that represents the target validation group. When using the jQuery approach, specify the validationGroup configuration option for the button. Assign the validation group name specified for the validationGroup option of the validators that extend the editors to be validated.

See Also

• Validate Several Editor Values

This option accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }