DevExtreme DataGrid

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.tsx
• 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)