DataGrid for DevExtreme - How to customize built-in Edit Form buttons and add a custom button

This example demonstrates how to display the customized Save and Cancel buttons in Form and Popup edit modes. This solution also adds a custom button.

Popup	Form

Implementation details

It is necessary to replace built-in Save and Cancel buttons. The solutions for Popup and Form edit modes are different.

Popup: use the DataGrid.Editing.Popup.toolbarItems array to define all required buttons. These items will overwrite built-in Save and Cancel buttons.

Form: add a SimpleItem with a template. Place the Toolbar component in this template and define the required buttons in this toolbar. Use CSS to hide built-in Save and Cancel buttons:

#gridForm .dx-datagrid-form-buttons-container {  
    display: none  
}

Files to Review

• jQuery
  • EditingForm.js
  • EditingPopup.js
• NetCore
  • DataGridForm.cshtml
  • DataGridPopup.cshtml
  • Index.cshtml
• Angular
  • grid-form.component.html
  • grid-form.component.ts
  • grid-popup.component.html
  • grid-popup.component.ts
• React
  • EditingForm.tsx
  • EditingForm.tsx
• Vue
  • GridForm.vue
  • GridPopup.vue

Documentation

• DataGrid Form
• Save, Cancel, and Custom Buttons