All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Form - ButtonItem

Configures a button form item.

Type:

Object

A button form item, as the name implies, consists of a button that does a custom action. You can customize the button's appearance and position on the form.

View Demo

alignment Deprecated

Use the horizontalAlignment instead.

Specifies the button's horizontal alignment.

Type:

String

Default Value: 'right'
Accepted Values: 'center' | 'left' | 'right'

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Right, and Center.

buttonOptions

Configures the button.

Default Value: undefined

See the Button configuration for options that you can specify in this object.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "button",
            buttonOptions: {
                text: "Do Something",
                type: "success",
                onClick: function () {
                    // Implement your logic here
                }
            }
        }, 
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-form ...>
    <dxi-item
        itemType="button"
        [buttonOptions]="buttonOptions">
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonOptions = {
        text: "Do Something",
        type: "success",
        onClick: function () {
            // Implement your logic here
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
NOTE
The fields of a configuration object passed to this option do not support two-way binding in Angular, AngularJS, and Knockout and event bindings in Angular.

colSpan

Specifies how many columns the item spans.

Type:

Number

Default Value: undefined

cssClass

Specifies a CSS class to be applied to the item.

Type:

String

Default Value: undefined

horizontalAlignment

Specifies the button's horizontal alignment.

Type:

String

Default Value: 'right'
Accepted Values: 'center' | 'left' | 'right'

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Right, and Center.

itemType

Specifies the item's type. Set it to "button" to create a button item.

Type:

String

Default Value: 'simple'
Accepted Values: 'empty' | 'group' | 'simple' | 'tabbed' | 'button'

name

Specifies the item's identifier.

Type:

String

Default Value: undefined

Use this name to access the form item in the itemOption(id) and getButton(name) methods.

verticalAlignment

Specifies the button's vertical alignment.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'center' | 'top'

Use the VerticalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Bottom, Center, and Top.

visible

Specifies whether the item is visible.

Type:

Boolean

Default Value: true

visibleIndex

Specifies the item's position regarding other items in a group, tab, or the whole widget.

Type:

Number

Default Value: undefined

Form items without the specified visibleIndex follow the items with it, and they are sorted alphabetically.