Skip to content

This example demonstrates how to display the customized Save and Cancel buttons in Form and Popup edit modes.

License

Notifications You must be signed in to change notification settings

DuckTieCorpMember/devextreme-datagrid-customize-edit-form-buttons

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
CustomButtons-Popup CustomButtons-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

Documentation

About

This example demonstrates how to display the customized Save and Cancel buttons in Form and Popup edit modes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 31.1%
  • C# 21.6%
  • JavaScript 19.5%
  • HTML 18.3%
  • Vue 7.5%
  • CSS 1.5%
  • SCSS 0.5%