DevExtreme jQuery - Add a Button
You can add a button that performs a custom action using a button item by setting the itemType option to "button". Then, configure the button using the buttonOptions object which can contain any Button widget option.
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
],
// ...
})See Also
Feedback