Row Editing in React Data Grid

The Syncfusion® React Data Grid component supports inline row editing for direct updates to cell values. To enable this, set editSettings.mode property to Normal and configure the allowEdit, allowAdd, and allowDelete properties to true to provide full CRUD functionality.

In normal mode, the selected row becomes editable for efficient data modifications. The following actions facilitate CRUD operations:

Edit a Row: Inline edit mode is activated by double-clicking a row or pressing F2.
Add a New Row: A new row is added by clicking the Add button in the toolbar or pressing Insert (⌘ + ⌥ + Enter on macOS) to start editing.
Delete a Row: A selected row is removed by clicking the Delete button in the toolbar or pressing Delete.
Save Changes: Changes are saved by pressing Enter or clicking the Update button in the toolbar, exiting edit mode.
Cancel Edit: Changes are discarded by pressing Esc or clicking the Cancel button in the toolbar, exiting edit mode.

Display default value for columns while adding

Data Grid component enables automatic population of column values for new rows by setting the defaultValue property in the column configuration.

Cancel edit based on condition

To restrict edit, add, or delete actions in the grid based on specific conditions using the onRowAddStart, onRowEditStart, and onDataChangeStart events. These events are triggered at the start of a CRUD operation, enabling evaluation of the action (such as beginEdit, add, or delete) and cancellation by setting args.cancel as true. For example, editing or deleting a row can be blocked if the "Role" column contains the value "Manager".

Show confirmation dialog while deleting

Data Grid component prevents accidental deletions by enabling a built-in confirmation dialog. This is achieved by setting the confirmOnDelete property to true within the edit settings configuration.

Enable editing in single click

When configured in Normal mode, grid supports enabling single-click editing for immediate cell modifications. This is achieved by implementing the following steps:

Add an onMouseUp event to the grid.
If the clicked element is a cell (sf-cell), use selectRow and editRecord methods to begin editing.
If the grid is already in edit mode, call the saveDataChanges method before starting a new edit.

This approach allows entering edit mode instantly without requiring double-clicks or toolbar interactions.

Disable editing for a particular row

Data Grid component allows preventing edits on specific rows by utilizing the onRowEditStart event. Editing can be canceled by setting the args.cancel property to true based on row data conditions.

For example, to block editing rows where "Ship Country" column has the value "France", evaluate the row data during the onRowEditStart event and cancel the edit accordingly.

Command column editing

Command column editing places CRUD (Create, Read, Update, Delete) action buttons in a grid column to perform operations on individual rows. It is commonly applied to support inline editing, row deletion, or saving changes directly within the grid. To configure command column editing, define the getCommandItems property with the required action buttons.

The built-in command buttons include:

Button	Action
Edit	Initiates editing of the current row.
Delete	Deletes the current row.
Save	Commits the edited changes.
Cancel	Discards the editing state.

Enable command column editing

Command column editing activates by setting the editSettings property with allowEdit, and allowDelete as true. A unique column must be designated as the primary key using the isPrimaryKey property set to true to ensure accurate row identification during updates and deletions.

Custom command column

The command column allows default action buttons to be replaced with custom elements. Customization is achieved through the getCommandItems property by setting the command key to custom.

Each custom element must include an event listener to perform the required action. For example, a custom "Delete" button can be rendered, with its onClick handler invoking the grid's deleteRecord method to remove the selected row.

The command column can be extended by integrating custom components to enhance interaction. Configuration is defined through the getCommandItems property, which replaces the default buttons with a Syncfusion React Context Menu component.

The context menu appears when hovering over a custom icon that represents "Edit", "Delete", "Save", or "Cancel". Grid actions are executed through the onSelect event, where the selected menu item determines the action, and the corresponding grid method is invoked to perform the operation.

Programmatic editing

Editing operations within the grid can be managed programmatically using built-in methods. This allows edit actions to be triggered and controlled without requiring direct interaction.

Method	Description
`editRecord`	Selects the target row to begin editing.
`addRecord`	Inserts a new row into the grid programmatically. Can be used in two ways: - `addRecord(data, index)`: Specify data values to prefill the new row and define the index position for the new row. - `addRecord()`: Adds an empty row at index 0 by default.
`updateRecord`	Modifies the contents of an existing row. - `updateRecord(index, data)`: Specify the index position of the row to update and provide the updated data values.
`deleteRecord`	Removes a row by selecting the target row.