Example of Inline Editing in React Grid Component

All Controls
/
Grid
/
NormalEdit

In this demo, you can edit the currently selected record by changing the state of the corresponding record to edit. You can carry out the following CRUD operations:

  • Add - To add a new record, click the add toolbar button.
  • Edit - To edit record, double click a cell.
  • Delete - To delete a record, click the toolbar delete button after selecting a row.
  • Update and Cancel - Save or discard changes by clicking the toolbar update and cancel button respectively.

By default, a new row will be added at the top of the grid. You can change it by setting editSettings.newRowPosition as Bottom

More Details...

Loading....
Description

Grid supports CRUD operations. This CRUD operations can be configured using editSettings. It also has the following modes to manipulate the datasource.

  • Normal
  • Dialog
  • Batch

In the normal edit mode, when you start editing the currently selected record is changed to edit state. You can edit any row by double clicking it or clicking the toolbar’s Edit button. You can change the row values and save edited data to the data source.

In order to add a new record easily, the grid content always displays a blank "add new row". You can enable this feature by setting the showAddNewRow property of editSettings to true.

Injecting Module

Grid features are separated into feature-wise modules. To use the editing feature, inject Edit module into the services.

More information on the inline editing can be found in this documentation section.