JavaScript/jQuery Form - 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.

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

JavaScript/jQuery Form - Add a Button

See Also