Editing Basics

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

Getting Started

  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. Create a new data collection which has the edit state of each data item. In the following example, the id of the edited item is stored in the application state.

    <Grid
        data={this.state.data.map((item) =>
            ({ ...item, inEdit: item.ProductID === this.state.editID })
        )}
  3. 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. To disable the editing for any column, set the GridColumn editable property to false.

    <Grid>
        <Column field="ProductID" title="Id" editable={false} />
        <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>
  4. Define a function for the onItemChange event which will handle the data 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 onItemChange parameters.

    <Grid onItemChange={this.onItemChange}>
    onItemChange = (event) => {
        const editedItemID = event.dataItem.ProductID;
        const data = this.state.data.map(item =>
            item.ProductID === editedItemID ? {...item, [event.field]: event.value} : item
        );
        this.setState({ data });
    };

The following example demonstrates how to implement the editing of the Grid data.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';

import { sampleProducts } from './sample-products.jsx';

class App extends React.Component {
    state = {
        data: [ ...sampleProducts ],
        editID: null
    }

    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={this.state.data.map((item) =>
                    ({ ...item, inEdit: item.ProductID === this.state.editID })
                )}
                editField="inEdit"

                onRowClick={this.rowClick}
                onItemChange={this.itemChange}
            >
                <GridToolbar>
                    <div onClick={this.closeEdit}>
                        <button title="Add new" className="k-button k-primary" onClick={this.addRecord} >
                            Add new
                    </button>
                    </div>
                </GridToolbar>
                <Column field="ProductID" title="Id" width="50px" editable={false} />
                <Column field="ProductName" title="Name" />
                <Column field="FirstOrderedOn" title="First Ordered" editor="date" format="{0:d}" />
                <Column field="UnitsInStock" title="Units" width="150px" editor="numeric" />
                <Column field="Discontinued" title="Discontinued" editor="boolean" />
            </Grid>
        );
    }

    rowClick = (event) => {
        this.setState({
            editID: event.dataItem.ProductID
        });
    };

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

    closeEdit = (event) => {
        if (event.target === event.currentTarget) {
            this.setState({ editID: null });
        }
    };

    addRecord = () => {
        const { data } = this.state;
        const newRecord = { ProductID: data.length + 1 };

        this.setState({
            data: [ newRecord, ...data ],
            editID: newRecord.ProductID
        });
    };
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Editing Options

 /