DataGrid for DevExtreme - Editing with dataRowTemplate

This example creates a custom template for rows in edit mode. It also allows users to insert or delete rows. Follow the steps below to create an application with similar functionality.

• Implement a dataRowTemplate to create custom templates for rows in view and edit modes.

• Call editRow(), deleteRow(), saveEditData(), and cancelEditData() methods to start/stop edit operations or delete rows.

• Implement the onToolbarPreparing event handler to create a custom button that inserts a new row. Use onInitNewRow to initialize new row cells.

• Modify the editing.changes array when an editor's value is changed.

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
  • data-row-template.component.html
  • data-row-template.component.ts
  • edit-row-template.component.html
  • edit-row-template.component.ts
• Vue
  • HomeContent.vue
  • DataRowTemplate.vue
  • EditRowTemplate.vue
• NetCore
  • Index.cshtml
  • _DataRowTemplate.cshtml
  • _EditRowTemplate.cshtml

Documentation

• dataRowTemplate
• onToolbarPreparing
• onInitNewRow
• editing.changes

More Examples

• DevExtreme DataGrid – Create a custom Pop-up Edit Form using Popup and Form components
• DataGrid for DevExtreme - How to handle different value types with editCellTemplate for the same column
• DataGrid for DevExtreme - How to define DataGrid in the Popup Edit Form to edit a data field