Configuring Stateful Grids

Stateful components are class components that have a state which gets initialized in the constructor.

You can configure a stateful KendoReact Data Grid to perform paging, sorting, filtering, grouping, and editing, and also reuse it in multiple applications and pages by setting its columns and desired data operations.

import React from 'react';
import ReactDOM from 'react-dom';

import { GridWithState as Grid } from './with-state.jsx';
import { GridColumn } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <Grid
                    data={products}
                    style={{ height: '540px' }}
                    sortable={true}
                    pageSize={10}
                    pageable={true}
                    groupable={true}
                    filterable={true}
                    reorderable={true}
                    resizable={true}
                >
                    <GridColumn field="ProductName" title="Product Name" />
                    <GridColumn field="UnitsInStock" title="Units" filter="numeric" editor="numeric" />
                </Grid>
            </div>
        );
    }
}

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

Data Operations

The stateful Grid performs its data operations by using the process method of the DataQuery library. To apply the changes and to save the current state of the grid data when a data operation is performed, handle the onDataStateChange event.

onDataStateChange={(e) => {
    this.setState({
        result: process(this.state.unprocessedData ? this.state.unprocessedData : this.props.data, e.data),
        dataState:e.data});
    }}

Editing

To configure the stateful Grid for editing:

  1. Set two different data collections. The first data collection will be displayed in the Grid after the data operations are applied. The second data collection will be used to edit and add items to the collection.

    If the stateful Grid is not intended to be groupable, you can use only one data collection.

    this.state = {
        result: process(this.props.data,{skip:0}),
        dataState: {skip: 0},
        unprocessedData: this.props.data };
  2. Handle the onItemChange event which will fire each time the user updates any of the editors.

    itemChange = (event) => {
        var data = this.state.unprocessedData
        var currentDataState = data;
    
        if (event.field === this.props.editField && event.value === 'delete') {
            data.splice(data.findIndex(d => d === event.dataItem), 1);
        } else {
            event.dataItem[event.field] = event.value;
        }
        this.setState({ result: process(data,this.state.dataState), unprocessedData: data });
    };
  3. Add items to the collection by using a function which you can call from a button click either inside the Grid toolbar or outside the Grid.

    addNew = () => {
        var data = this.state.unprocessedData
        data.unshift({[this.props.editField]: true, Discontinued: false, ProductID: 0})
        this.setState({
            result: process(data, this.props.pageable ? {group:this.state.dataState.group, take: this.state.dataState.take,filter: this.state.dataState.filter , skip: 0, sort:this.state.dataState.sort } : this.state.dataState),
            unprocessedData: data,
            dataState: this.props.pageable ? {group:this.state.dataState.group, take: this.state.dataState.take,filter: this.state.dataState.filter skip: 0, sort:this.state.dataState.sort } : this.state.dataState
        });
    };
 /