ButtonItem
Type:
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.
buttonOptions
Type:
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;
NOTE
In Angular and Vue, the nested component that configures the buttonOptions property does not support event bindings and two-way property bindings.
itemType
Type:
Default Value: 'simple'
Accepted Values: 'empty' | 'group' | 'simple' | 'tabbed' | 'button'
name
Type:
Default Value: undefined
Use this name to access the form item in the itemOption(id) and getButton(name) methods.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.