Inline

The KendoReact Data Grid enables you to create, update, and delete data records inline.

The following example demonstrates how to implement the inline editing.

Setup

1. Set the editField property of the Grid — editField will indicate the editable data items and is part of the temporary data items that are used during editing. For the data items in the edit mode, set the edit state in their editField.

   Copy Code    <Grid
           editField="inEdit"

   Copy Code    dataItem.inEdit = true;

2. Configure the command column by defining the command buttons inside the GridCell component. In the example below, we use a function which receives all functions that will be executed from the command buttons and passes them to the command cell component.

   Copy Code    CommandCell = props => (
           <MyCommandCell
           {...props}
           edit={this.enterEdit}
           remove={this.remove}
           add={this.add}
           discard={this.discard}
           update={this.update}
           cancel={this.cancel}
           editField={this.editField}
           />
       );

   Copy Code    export const MyCommandCell = props => {
           const { dataItem } = props;
           const inEdit = dataItem[props.editField];
           const isNewItem = dataItem.ProductID === undefined;
   
           return inEdit ? (
               <td className="k-command-cell">
               <button
                   className="k-button k-grid-save-command"
                   onClick={() => (isNewItem ? props.add(dataItem) : props.update(dataItem))}
               >
                   {isNewItem ? "Add" : "Update"}
               </button>
               <button
                   className="k-button k-grid-cancel-command"
                   onClick={() => (isNewItem ? props.discard(dataItem) : props.cancel(dataItem))}
               >
                   {isNewItem ? "Discard" : "Cancel"}
               </button>
               </td>
           ) : (
               <td className="k-command-cell">
               <button
                   className="k-primary k-button k-grid-edit-command"
                   onClick={() => props.edit(dataItem)}
               >
                   Edit
               </button>
               <button
                   className="k-button k-grid-remove-command"
                   onClick={() =>
                   confirm("Confirm deleting: " + dataItem.ProductName) &&
                   props.remove(dataItem)
                   }
               >
                   Remove
               </button>
               </td>
           );
       };

3. Define the enterEdit, remove, add, update, discard and cancel functions needed by the command cell.

   Copy Code    enterEdit = dataItem => {
           this.setState({
           data: this.state.data.map(item =>
               item.ProductID === dataItem.ProductID ? { ...item, inEdit: true } : item
           )
           });
       };

   Copy Code    remove = dataItem => {
           const data = deleteItem(dataItem);
           this.setState({ data });
       };

   Copy Code    add = dataItem => {
           dataItem.inEdit = true;
   
           const data = insertItem(dataItem);
           this.setState({
               data: data
           });
       };

   Copy Code    discard = dataItem => {
           const data = [...this.state.data];
           data.splice(0,1)
           this.setState({ data });
       };

   Copy Code    update = dataItem => {
           dataItem.inEdit = false;
           const data = updateItem(dataItem);
           this.setState({ data });
       };

   Copy Code    cancel = dataItem => {
           const originalItem = getItems().find(
               p => p.ProductID === dataItem.ProductID
           );
           const data = this.state.data.map(item =>
               item.ProductID === originalItem.ProductID ? originalItem : item
           );
   
           this.setState({ data });
       };

4. Define a function for the onItemChange event which will handle any input changes during editing. Inside the event, all relevant data, such as the edited data item, the newly entered value, or the edited field, will be available as itemChange parameters.

   Copy Code     <Grid itemChange={this.itemChange}>

   Copy Code    itemChange = event => {
           const data = this.state.data.map(item =>
           item.ProductID === event.dataItem.ProductID
               ? { ...item, [event.field]: event.value }
               : item
           );
   
           this.setState({ data });
       };

5. Per column, set the options that are related to editing:

• editable — Determines if the column is editable.
• editor — Specifies the data type of the column and, based on that, sets the appropriate editor.

Suggested Links

• Data Query Overview
• API Reference of the Grid
• API Reference of the GridToolbar
• API Index of the Grid