All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Add a Button

You can add a button that performs a custom action using a button item by setting the itemType property to "button". Then, configure the button using the buttonOptions object which can contain any Button UI component property.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            name: "John Heart",
            email: "jheart@dx-email.com"
        },
        colCount: 2,
        items: [
            "name", 
            { itemType: "empty" }, 
            "email", 
            {
                itemType: "button",
                alignment: "left",
                buttonOptions: {
                    text: "Send an Email",
                    onClick: function () {
                        // ...
                    }
                }
            }
        ]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="2">
    <dxi-item dataField="name"></dxi-item>
    <dxi-item itemType="empty"></dxi-item>
    <dxi-item dataField="email"></dxi-item>
    <dxi-item 
        itemType="button" 
        alignment="left"
        [buttonOptions]="buttonOptions">
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        name: "John Heart",
        email: "jheart@dx-email.com"
    }
    buttonOptions = {
        text: "Send an Email",
        onClick: function () {
            // ...
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="name" />
        <DxEmptyItem />
        <DxSimpleItem data-field="email" />
        <DxButtonItem alignment="left">
            <DxButtonOptions
                text="Send an Email"
                :on-click="buttonClick" />
        </DxButtonItem>
    </DxForm>
</template>

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

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

export default {
    components: {
        DxForm, DxEmptyItem, DxSimpleItem, DxButtonItem, DxButtonOptions
    },
    data() {
        return {
            employee: {
                name: 'John Heart',
                email: 'jheart@dx-email.com'
            }
        }
    },
    methods: {
        buttonClick(e) {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, EmptyItem, SimpleItem, ButtonItem, ButtonOptions } from 'devextreme-react/form';

class App extends React.Component {
    constructor() {
        super();
        this.buttonClick = this.buttonClick.bind(this);
    }

    employee = {
        name: 'John Heart',
        email: 'jheart@dx-email.com'
    }

    render() {
        return (
            <Form
                formData={this.employee}
                colCount={2}>
                <SimpleItem dataField="name" />
                <EmptyItem />
                <SimpleItem dataField="email" />
                <ButtonItem alignment="left">
                    <ButtonOptions
                        text="Send an Email"
                        onClick={this.buttonClick} />
                </ButtonItem>
            </Form>
        );
    }

    buttonClick(e) {
        // ...
    }
}

export default App;

View Demo

See Also