Inline Editing with Custom Editors

The KendoReact Data Grid allows you to set a custom cell as an editor.

The following example demonstrates how to use the DropDownList as a custom editor using the cell property of the GridColumn component, which allows you to render a custom Grid cell.

Example
View Source
Change Theme:

Grid with External Form Editing

The following example demonstrates how to implement external Form editing using the cell property of the GridColumn component.

Example
View Source
Change Theme:

In-Cell Editing with Custom Editors

The main difference in introducing custom editors with in-cell editing is the way that the cell content is returned. The in-cell editing relies on the cellRender and rowRender properties of the Grid and if the custom cell is not returned by calling the default render of the cell, this will not trigger the Grid cellRender for those cells.

The following example demonstrates how to use the custom editors with in-cell editing.

Example
View Source
Change Theme: