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:

  1. 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}
    />
    );
  2. 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}
        />
    );
  3. 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:

Example
View Source
Change Theme:

In this article

Not finding the help you need?