In-Cell Editing of All Cells

The KendoReact Data Grid allows you to set the in-cell edit mode to all its cells at the same time.

Implementing the in-cell edit mode for all Grid cells is useful for editing large data sets and for optimizing the performance of the Grid.

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

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

class App extends React.Component {
  state = {
      data: sampleProducts.map((item) => Object.assign({ inEdit: true }, item))
  }

  render() {
      return (
        <Grid
            data={this.state.data}
            editField="inEdit"
            onItemChange={this.itemChange}
        >
            <Column field="ProductID" title="Id" width="50px" editable={false} />
            <Column field="ProductName" />
            <Column field="FirstOrderedOn" editor="date" format="{0:d}" />
            <Column field="UnitsInStock" width="150px" editor="numeric" />
            <Column field="Discontinued" width="50px" editor="boolean" />
        </Grid >
    );
  }

  itemChange = (e) => {
      e.dataItem[e.field] = e.value;
      this.setState({
          data: [ ...this.state.data ]
      });
  };
}

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