In-Cell

The following example demonstrates how to implement the in-cell editing mode in the KendoReact Data Grid.

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';
import { Renderers } from './renderers.jsx';

const cloneProduct = (product) => ({ ...product });

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: sampleProducts.map(cloneProduct),
            editField: undefined,
            changes: false
        };

        this.renderers = new Renderers(this.enterEdit, this.exitEdit, 'inEdit');
    }
    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={this.state.data}
                rowHeight={50}
                onItemChange={this.itemChange}

                cellRender={this.renderers.cellRender}
                rowRender={this.renderers.rowRender}

                editField="inEdit"
            >
                <GridToolbar>
                    <button
                        title="Save Changes"
                        className="k-button"
                        onClick={this.saveChanges}
                        disabled={!this.state.changes}
                    >
                        Save Changes
                    </button>
                    <button
                        title="Cancel Changes"
                        className="k-button"
                        onClick={this.cancelChanges}
                        disabled={!this.state.changes}
                    >
                        Cancel Changes
                    </button>
                </GridToolbar>
                <Column field="ProductID" title="Id" width="50px" editable={false} />
                <Column title="Product Name" width="200px" field="ProductName" />
                <Column title="Units In Stock" editor="numeric" field="UnitsInStock" />
                <Column title="First Ordered" editor="date" format="{0:d}" width="140px" field="FirstOrderedOn" />
                <Column editor="boolean" field="Discontinued" />
            </Grid>
        );
    }

    enterEdit = (dataItem, field) => {
        const data = this.state.data.map(item => ({
                ...item,
                inEdit: item.ProductID === dataItem.ProductID ? field : undefined
            })
        );

        this.setState({
            data,
            editField: field
        });
    }

    exitEdit = () => {
        const data = this.state.data.map(item => (
            { ...item, inEdit: undefined }
        ));

        this.setState({
            data,
            editField: undefined,
        });
    }

    saveChanges = () => {
        sampleProducts.splice(0, sampleProducts.length, ...this.state.data);
        this.setState({
            editField: undefined,
            changes: false
        });
    }

    cancelChanges = () => {
        this.setState({
            data: sampleProducts.map(cloneProduct),
            changes: false
        });
    }

    itemChange = (event) => {
        event.dataItem[event.field] = event.value;
        this.setState({
            changes: true
        });
    }

}

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