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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

        <Grid
            editField="inEdit"
        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.

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

        enterEdit = dataItem => {
            this.setState({
            data: this.state.data.map(item =>
                item.ProductID === dataItem.ProductID ? { ...item, inEdit: true } : item
            )
            });
        };
        remove = dataItem => {
            const data = deleteItem(dataItem);
            this.setState({ data });
        };
        add = dataItem => {
            dataItem.inEdit = true;
    
            const data = insertItem(dataItem);
            this.setState({
                data: data
            });
        };
        discard = dataItem => {
            const data = [...this.state.data];
            data.splice(0,1)
            this.setState({ data });
        };
        update = dataItem => {
            dataItem.inEdit = false;
            const data = updateItem(dataItem);
            this.setState({ data });
        };
        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.

         <Grid itemChange={this.itemChange}>
        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.

In this article

Not finding the help you need?