Popup Editing in React Data Grid
The Syncfusion® React Data Grid component includes popup editing to modify data in the selected row through a popup. This facilitates cell value changes and saves updates to the data source. It is especially useful for making rapid modifications without navigating to separate pages or views. The popup streamlines editing by allowing updates to multiple fields within the selected row in a single action.
Enable popup editing
To enable popup editing, set the editSettings.mode property to Popup along with allowEdit, allowAdd, and allowDelete as true. The mode property controls the editing mode, and the Popup value activates the popup editing, allowing multiple fields in the selected row to be updated in a single action.
Ensure to define a unique column as the primary key using
isPrimaryKeyproperty astruefor accurate data updates.
Customize edit popup
The edit popup in the Data Grid component supports customization of appearance through the editSettings.popupSettings property. The following Dialog component properties can be adjusted to meet specific requirements:
| Property | Description |
|---|---|
animation | Defines the animation effect, duration, and delay for popup transitions. |
draggable | Enables dragging of the popup across the screen. |
resizable | Allows resizing of the popup. |
position | Specifies the popup’s position on the screen. |
resizeHandles | Determines which sides or corners can be used to resize the popup. |
header | Sets the title text displayed in the popup header. |
The following example demonstrates customization of the popup using the header, draggable, animation, position, resizable, and resizeHandles properties of the Dialog component through the editSettings.popupSettings property.
Dynamic popup header customization
To dynamically set the edit popup header, use the rowEditStart event when editing an existing record and the rowAddStart event when adding a new record. Update the header through editSettings.popupSettings.header. This ensures the popup clearly reflects the current action "Edit Record" or "Add New Record" providing immediate context during operations.
Popup template editing
The Data Grid component supports popup template editing, which customizes the editing process using forms. These forms enable adding and updating grid records. To enable this feature, set the editSettings.mode property to PopupTemplate and define the grid editors using the editSettings.popupTemplate property.
In some scenarios, additional field editors may be required in the popup that are not part of the column model but must exist in the grid data source. The popup template provides flexibility to extend and customize the default edit popup in such cases.
Reactive form editing
The Syncfusion® React Data Grid component supports reactive form editing, which enables dynamic, state‑driven forms for grid data modification. Reactive forms use React hooks and component state to manage form fields, validations, and error handling instead of static templates. This approach automatically updates forms in response to data changes, providing a smooth and responsive editing experience.
Reactive forms are particularly effective when implementing custom popup templates. By leveraging hooks such as useState, useEffect, and useImperativeHandle, you can:
- Maintain form state independently from the grid.
- Validate input fields dynamically before committing changes.
- Display error messages conditionally based on validation outcomes.
- Integrate Syncfusion input components (e.g.,
DatePicker,NumericTextBox,TextBox) for consistent UI behavior.
This technique is well suited for complex scenarios that require multi‑field validation or customization beyond standard grid operations.