DevExpress-Examples/devextreme-datagrid-custom-editing-form

The DevExtreme DataGrid component ships with a built-in Pop-up Edit Form (for data editing purposes). To create a custom pop-up edit form, follow the steps outlined in this example.

DevExtreme DataGrid – Create a custom Pop-up Edit Form using Popup and Form components

Our DataGrid component ships with a built-in Pop-up Edit Form (for data editing purposes). To create a custom pop-up form, simply use our Popup and Form UI components as follows:

Implement a DataGrid callback function that displays the Popup when a user clicks the built-in "Add row" button. Add a Form to the Popup contentTemplate and specify desired Popup toolbar buttons. Next, call a function that updates the DataGrid data source once users enter/modify Form values and submit changes (by pressing the "Confirm" button).

Files to Review

• jQuery
  • index.html
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • App.vue
• React
  • App.js
• ASP.NET Core
  • Index.cshtml

Documentation

• Getting Started with DataGrid
• DataGrid Popup Mode
• DataGrid - API Reference
• Popup - API Reference
• Form - API Reference

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)