DataGrid for DevExtreme - How to implement a context menu to edit, add, and delete rows

This example demonstrates how to create a custom context menu to implement CRUD operations.

Implementation Details

Handle the onContextMenuPreparing event to create a custom context menu.

In the event handler, do the following:

• Check if the current row is the data row.

• Add the "edit", "insert", and "delete" items to the e.items array.

• For each item, specify text and handle the onItemClick event.

• In the corresponding onItemClick event handler, call the editRow, addRow, or deleteRow methods to edit the current row, add a new row, or remove the current row.

Files to Review

jQuery:

• index.html
• script.js

Documentation

• Getting Started with DataGrid
• DataGrid- API Reference

More Examples

How to implement CRUD operations using API controllers in an ASP.NET Core with Razor Pages project