In-Cell Editing
The following example demonstrates how to assign a custom cell editor to each cell in the Grid by using the cellRender.
The following example demonstrates how to implement the in-cell editing mode in the KendoReact Data Grid.
To achieve that:
-
Implement a
customCellRender
component that will handle the entering in edit mode of each cell.const customCellRender: any = ( td: React.ReactElement<HTMLTableCellElement>, props: GridCellProps ) => ( <CellRender originalProps={props} td={td} enterEdit={enterEdit} editField={EDIT_FIELD} /> );
-
Implement a
customRowRender
component that is responsible for exiting the edit mode ot the cells.const customRowRender: any = ( tr: React.ReactElement<HTMLTableRowElement>, props: GridRowProps ) => ( <RowRender originalProps={props} tr={tr} exitEdit={exitEdit} editField={EDIT_FIELD} /> );
-
Handle the
onItemChange
event of the Grid in order to update the bound data based on the applied edits.const itemChange = (event: GridItemChangeEvent) => { let field = event.field || ''; event.dataItem[field] = event.value; let newData = data.map((item) => { if (item.ProductID === event.dataItem.ProductID) { item[field] = event.value; } return item; }); setData(newData); setChanges(true); };
You can see a live implementation of the approach described above along with all related functions updating the Grid data in the sample below: