KendoReact Data Grid Editing Overview
The KendoReact Data Grid enables you to create, update, and delete data records by providing built-in edit state functionality.
Enabling Editing
The KendoReact Grid supports editing in two modes:
-
Built-in State Management: The Grid manages its own editing state internally.
-
Controlled Mode: The editing state is externally managed by handling events and updating the state accordingly.
Using the Built-in State Management for Editing
To enable filtering using the built-in state management mechanism, follow these steps:
-
Enable the
autoProcessDataprop to allow the Grid to handle paging automatically. -
Set the
dataItemKeyprop to a unique value field from the data bound to the Grid. -
Configure the
editableprop of the Grid to enable editing. For example, setting it to{ mode: 'incell' }will enable the incell editing. -
Assign a function to the
onItemChangeevent of the Grid to handle the item editing. -
(Optional) Disable editing for specific columns setting its editable property to
false. -
(Optional) Set the type of the editor per column using the
editorproperty of the GridColumn component. The built-in editor types aretext,date,numberandboolean. The usage of each editor for each column depends on the type of the edited data.
The following example demonstrates how to implement editing using the built-in state management of the KendoReact Grid.
Using the Editing in Controlled Mode
-
Set the
editableprop of the Grid to true and configure itseditproperty to manage the built-in edit state and track which rows are being edited.jsxconst [edit, setEdit] = React.useState<EditDescriptor>({});jsx<Grid edit={edit} editable={{ mode: 'incell' }} > -
Handle the
onEditChangeto update the edit state of the Grid internally.jsx<Grid onEditChange={handleEditChange} >jsxconst handleEditChange = (event: GridEditChangeEvent) => { setEdit(event.edit); }; -
Disable editing for specific columns setting its editable property to
false.jsx<Grid> <Column field="ProductID" title="Id" editable={false} /> </Grid> -
Set the type of the editor per column using the
editorproperty of the GridColumn component. The built-in editor types aretext,date,numberandboolean. The usage of each editor for each column depends on the type of the edited data.jsx<Grid> <Column field="ProductName" title="Name" editor="text" /> <Column field="FirstOrderedOn" title="First Ordered" editor="date" /> <Column field="UnitsInStock" title="Units" width="150px" editor="numeric" /> <Column field="Discontinued" title="Discontinued" editor="boolean" /> </Grid> -
Define a function for the
onItemChangeevent which will handle the data changes during editing. The event provides the edited data item, the field being changed, and the new value available asonItemChangeparameters.jsx<Grid onItemChange={onItemChange}>jsxconst itemChange = (event: GridItemChangeEvent) => { if (event.field) { setData((data) => data.map((item) => item.ProductID === event.dataItem.ProductID ? { ...item, [event.field!]: event.value } : item ) ); } setChanges(true); };
Preventing Column Editing
To prevent a column from being editable, set the editable prop to false for the required column:
<Column field="ProductID" title="Id" width="50px" editable={false} />
The following example demonstrates how to implement the editing of the Grid data. Click the Add New button to add a new record at the end of the Grid, and the Cancel one to dismiss the active editing.
Optimizing Editing Performance for Large Datasets
When working with large datasets in editable Grids, the traditional approach of searching through arrays to update edited items can cause performance bottlenecks. Each cell edit operation requires iterating through the entire array to find the matching item for updates, which becomes noticeable with datasets containing thousands of items.
The KendoReact Grid provides a dataIndex property in the GridItemChangeEvent that eliminates this issue by providing direct access to the edited item's position in the data array.
Optimized editing approach using dataIndex
const itemChange = (event: GridItemChangeEvent) => {
if (event.field) {
setData((data) =>
data.with(event.dataIndex, { ...event.dataItem, [event.field!]: event.value })
);
}
};
The following example demonstrates the editing performance difference between both approaches using 50,000 items.
For older browser support, you can implement a polyfill for the
Array.with()method.
KendoReact Data Grid Editing APIs
- Inline editing
- Inline editing with custom editors
- In-cell editing
- In-cell editing of all cells
- Editing with external popup form
- Editing with external Redux Form