Local Data Operations

The KendoReact Grid enables you to page, filter, sort and group the data locally.

Setup

To setup local data operations:

1. Set a value inside the state that will hold the current paging, filtering, sorting and grouping parameters. Not all are required, only the ones used in the Grid instance.

   Copy Code    const dataState = {
           sort: [{ field: "code", dir: "asc" }],
           take: 10,
           skip: 0
       };
   
       state = {
           dataState: dataState
       };

2. Pass the current data state to the Grid.

   Copy Code    <Grid
           {...this.state.dataState}

3. Use the onDataStateChange to handle all data operations from a single place. The event data provides the combine state of the Grid including paging, sorting, filtering and grouping parameters. With server operations, these parameters can be sent to the server to process the data there.

   Copy Code    onDataStateChange={(e)=>{
           this.setState({dataState: e.dataState})
       }}

4. Use the process method of the DataQuery library which will automatically process the data based on the current data state.

   Copy Code    <Grid
           data={process(products, this.state.dataState)}

Demo

The following example shows the Grid with paging, sorting and filtering enabled:

When the data state from the onDataStateChange or the initial state are set to the Grid, no further values for skip, take, filter, sort or group should be added, because they will already be added from the State. When the data property of the Grid is populated through the process helper method, the total property should not be set manually, because it will be part of the returned object.

Suggested Links

• Data Query Overview
• API Reference of the Grid
• API Index of the Grid
• Higher-Order Components