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.
Feedback