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

In Angular and Vue, the nested component that configures the buttonOptions option does not support event bindings and two-way property bindings. However, you can bind to the component's events and track changes in its properties.

Use the one-way property binding syntax to bind to events. To track property changes, implement the onOptionChanged event handler. You can access the name and value of the changed property within the handler. The following code demonstrates these solutions:

Angular
app.component.html
app.component.ts
app.module.ts
<dx-form ... >
    <dxi-item itemType="button">
        <dxo-button-options ...
            [onOptionChanged]="logOption">
        </dxo-button-options>
    </dxi-item>
</dx-form>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    logOption(e) {
        console.log(e.fullName + ': ' + e.value);
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFormModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFormModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxForm ... >
        <DxButtonItem>
            <DxButtonOptions ...
                :on-option-changed="logOption"
            />
        </DxButtonItem>
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxForm, {
    DxButtonItem,
    DxButtonOptions
} from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxButtonItem,
        DxButtonOptions
    },
    methods: {
        logOption(e) {
            console.log(e.fullName + ': ' + e.value);
        }
    }
}
</script>

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.