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.

Getting Started with the KendoReact Data Grid Editing

1. 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' }}
   >

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

   jsx

   <Grid
       onEditChange={handleEditChange}
   >

   jsx

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

3. Disable editing for specific columns setting its editable property to false.

   jsx

   <Grid>
       <Column field="ProductID" title="Id" editable={false} />
   </Grid>

4. Set the type of the editor per column using the editor property of the GridColumn component. The built-in editor types are text, date, number and boolean. 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>

5. Define a function for the onItemChange event which will handle the data changes during editing. The event provides the edited data item, the field being changed, and the new value available as onItemChange parameters.

   jsx

   <Grid onItemChange={onItemChange}>

   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);
   };

Preventing column editing

To prevent a column from being editable, set the editable prop to false for the required column:

jsx

<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.

Change Theme

Theme

Loading ...

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

Suggested Links

• API Reference of the Grid
• API Index of the Grid