DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Data Grid - Row Editing and Editing Events

The DataGrid allows users to edit data in multiple modes. This demo shows the "row" edit mode. To start editing any row, click "Edit" in it. Only one row can be in the edit state at a time.

To enable row edit mode, set the mode property to "row" and assign true to the editing object's allowUpdating, allowAdding, and allowDeleting properties.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Edit operations raise events that you can handle with the following functions:

This demo shows an event log under the grid.