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.
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;See Also
Feedback