Vue 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

buttonOptions

Configures the button.

Selector: button-options
Type:

Button Configuration

Default Value: undefined

See the Button configuration for properties 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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm ...>
        <DxItem
            :button-options="buttonOptions"
            item-type="button"
        />
    </DxForm>
</template>
<script>
import DxForm, { DxItem } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxItem
    },
    data() {
        return {
            buttonOptions: {
                text: "Do Something",
                type: "success",
                onClick: function () {
                    // Handle the button click here
                }
            }
        };
    }
}
</script>
React
App.js
import React from 'react';
import Form, { Item } from 'devextreme-react/form';

const buttonOptions = {
    text: "Do Something",
    type: "success",
    onClick: function () {
        // Handle the button click here
    }
};

const App = () => {
    return (
        <Form>
            <Item itemType="button" buttonOptions={buttonOptions} />
        </Form>
    );
};    

export default App;
Angular
NOTE
The nested component that configures the buttonOptions property does not support event bindings and two-way property bindings.
Vue
NOTE
The nested component that configures the buttonOptions property does not support event bindings and two-way property bindings.

Validation Demo Customize Fields at Runtime Demo

colSpan

Specifies how many columns the item spans.

Selector: col-span
Type:

Number

Default Value: undefined

cssClass

Specifies a CSS class to be applied to the item.

Selector: css-class
Type:

String

Default Value: undefined

View Demo

horizontalAlignment

Specifies the button's horizontal alignment.

Selector: horizontal-alignment
Type:

HorizontalAlignment

Default Value: 'right'

Validation Demo Customize Fields at Runtime Demo

itemType

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

Selector: item-type
Type:

FormItemType

Default Value: 'simple'
See Also

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.

Selector: vertical-alignment
Type:

VerticalAlignment

Default Value: '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 UI component.

Selector: visible-index
Type:

Number

Default Value: undefined

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