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'

When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalAlignment enum. 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'

When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalAlignment enum. 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 the name to access the form item in methods like itemOption(id) and getEditor(dataField).

verticalAlignment

Specifies the button's vertical alignment.

Type:

String

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

When using the widget as an ASP.NET MVC Control, specify this option using the VerticalAlignment enum. 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.