New to KendoReact? Start a free 30-day trial

In-Cell Editing in KendoReact Data Grid

By utilizing the cellRender prop, you can assign a custom cell editor to each grid cell, allowing for a seamless and efficient cell editing experience.

To enable in-cell editing in the KendoReact Data Grid you have to:

Implement a customCellRender component that will handle the entering in edit mode of each cell.

jsx

const customCellRender: any = (td: React.ReactElement<HTMLTableCellElement>, props: GridCellProps) => (
    <CellRender originalProps={props} td={td} />
);

Set the editable prop of the Grid to true and configure its edit property to manage the built-in edit state and track which rows are being edited.
jsx
```
const [edit, setEdit] = React.useState<EditDescriptor>({});
```
jsx
```
<Grid
    edit={edit}
    editable={{ mode: 'incell' }}
>
```

Handle the handleItemChange event of the Grid in order to update the bound data based on the applied edits.

jsx

const itemChange = (event: GridItemChangeEvent) => {
    if (event.field) {
        setData((data) =>
            data.map((item) =>
                item.ProductID === event.dataItem.ProductID ? { ...item, [event.field!]: event.value } : item
            )
        );
    }
    setChanges(true);
};

Handle the onEditChange to update the edit state of the Grid.

jsx

const handleEditChange = (event: GridEditChangeEvent) => {
    setEdit(event.edit);
};

You can see a live implementation of this approach in the sample below, where state management and related functions update the Grid’s data and its built-in edit state.

Change Theme

Theme

Loading ...

In-Cell Editing in KendoReact Data Grid

Suggested Links