DataGrid for DevExtreme - How to implement a custom editing form using the Popup and Form components

The DataGrid component supports pop-up form editing out of the box. To customize the form, follow this example to implement the Popup and Form components.

In the DataGrid, implement a function that customizes an addRowButton. The addRowButton displays the Popup component on click. Add a Form to the Popup contentTemplate. Implement Popup toolbar buttons and call a function that updates the DataGrid data source on click after users fill in the Form.

Files to Look At

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

Documentation

• Getting Started with DataGrid

• DataGrid - API Reference

More Examples

• DataGrid for DevExtreme - How to implement a custom editing form in ASP.NET MVC

• DataGrid for DevExtreme - How to show/hide or enable/disable Edit Form items based on another item's value