Editing in React Data Grid
The Syncfusion® React Data Grid component supports dynamic CRUD (Create, Read, Update, Delete) operations within the interface. Changes in the grid component sync with the database in real time, eliminating the need for external forms and improving data interactivity and responsiveness.
Enable editing
To enable editing in the Data Grid component, set editSettings property with allowEdit, allowAdd, and allowDelete as true. Define a unique column as the primary key using isPrimaryKey property as true for accurate data updates.
The following code demonstrates enabling editing in the grid component with validation rules for accurate data entry.
Adding a toolbar for editing
The Data Grid component provides a built-in toolbar with interactive buttons for efficient editing. Configure the toolbar property to include actions such as Add, Edit, Delete, Update, and Cancel, enabling quick access to CRUD operations.
Making columns read-only during editing
The Data Grid component allows setting specific columns as read-only during add and edit operations. Configure the allowEdit property to false in the column configuration to make a column visible but non-editable. For example, the "Assigned To" column appears in the edit form but cannot be modified.
Dynamically prevent editing for specific columns
To enable input only during add mode and make a column read-only during edit, dynamically set allowEdit property as false in the column configuration. In this example, any column can be configured to accept input during add mode. During edit mode, the same columns are rendered as read-only.
Conditional toggle of CRUD
Instead of static editSettings, use runtime control for add, edit, and delete actions based on specific conditions.
- Enable editing only during business hours.
- Allow deleting for users with confirmed status.
- Disable adding when record quota is exceeded.
Use events such as onRowAddStart, onRowEditStart, and onDataChangeStart to implement role-based or data-driven toggles.
Using a template for column editing
When default input types do not meet layout or interaction requirements, configure the column using the editTemplate property to define a custom editing interface mapped to the relevant field. This example shows a grid with a dropdown template for the "Branch" column.
Customize delete confirmation
The Data Grid component displays a confirmation dialog before deleting an item when the confirmOnDelete property is enabled in the edit settings configuration. This helps prevent accidental deletions and ensures the protection of important data.
Updating boolean columns with a single click
To enable single-click updates for boolean fields in normal edit mode, configure the column using a custom editTemplate property.
For example, the Syncfusion® React CheckBox component can be rendered in the "Availability" column and bound to the corresponding field value. The grid's updateRecord method applies changes instantly when the checkbox is toggled, bypassing the standard editor interface for direct updates within the grid.
Editing complex columns
Use the editTemplate property to handle complex or nested data in grid columns. Use the underscore ( _ ) operator (e.g., Name__FirstName) instead of dot notation to ensure accurate data binding for custom input elements.
In the following sample, the input element is rendered in the editTemplate and the name property should be defined as "Name__FirstName" and "Name__LastName".
Performing CRUD actions programmatically
The Data Grid component allows external control of Create, Read, Update, and Delete actions, ideal for triggering from custom toolbars or external UI elements. This approach provides enhanced flexibility in data management.
The following methods facilitate external management of grid data:
addRecord: Starts a new entry. If no data is passed, a blank form opens for input.editRecord: Enables edit mode for the selected row.deleteRecord: Removes the selected row.saveDataChanges: Saves changes in the grid.cancelDataChanges: Cancels editing and restores original state.
Troubleshooting: Editing works only for first row
Cause: Editing affects only the first row when the grid lacks a primary key, preventing unique row identification.
Solution: Configure the isPrimaryKey property as true on a column with unique values, (e.g., "Order ID"). This ensures accurate row tracking for edit and delete actions, preventing the grid from defaulting to the first row.
Events
The Data Grid component provides event hooks that allow precise control over editing actions such as add, edit, and delete. These events are ideal for implementing custom behavior, validation, logging, or UI adjustments before and after editing operations.
| Event | Description |
|---|---|
onRowEditStart | Fires when editing begins on a grid record. Use this event to perform validation, modify fields, or log activity before the individual starts editing. Ideal for preparing the UI or restricting edits based on conditions. |
onRowAddStart | Fires when the process of adding a new row starts. Useful for initializing default values, validating input, or customizing the add form. Triggered before the row is inserted into the grid. |
onDataChangeStart | Fires when a create, update, or delete operation is initiated. Enables pre-processing logic such as confirmation dialogs, audit logging, or conditional checks. Covers all data-changing actions before they are committed. |
onRowSelect | Fires when a row is selected for editing. Useful for highlighting the selected row, loading related data, or enabling contextual UI elements. Triggered when the individual clicks or navigates to a row. |
onDataChangeComplete | Fires after an editing operation (add/edit/delete) is completed. Use this to refresh data, show success messages, or trigger post-edit workflows. Ensures that all changes are finalized and reflected in the grid. |
In the following example, editing actions are conditionally prevented by setting args.cancel to true within the following events:
onRowEditStart: Blocks editing when the "Fat" value exceeds "10".onDataChangeStart: Prevents deletion when the "Food Name" value is "Pasta".onRowAddStart: Restricts adding a new row when the action exceeds the defined quota.