OData Server Operations

You can sort, filter, or paginate the data to which the Grid is bound by using the OData service.

To apply the data operations on the server, process the parameters by utilizing the toODataString function which is part of the Data Query package.

The following example demonstrates how to request and process data by handling the onDataStateChange event. In addition, the sample also shows how to:

  • Separate the data request and response logic from the declaration of the Grid.
  • Debounce the event to avoid multiple requests at the same time.
  • Show a loading panel over the Grid during data fetching.
import React from 'react';
import ReactDOM from 'react-dom';

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { ProductsLoader } from './products-loader.jsx';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: { data: [], total: 0 },
            dataState: { take: 10, skip: 0 }
        };
    }

    dataStateChange = (e) => {
        this.setState({
            ...this.state,
            dataState: e.data
        });
    }

    dataRecieved = (products) => {
        this.setState({
            ...this.state,
            products: products
        });
    }

    render() {
        return (
            <div>
                <Grid
                    filterable={true}
                    sortable={true}
                    pageable={true}
                    {...this.state.dataState}
                    {...this.state.products}
                    onDataStateChange={this.dataStateChange}
                >
                    <Column field="ProductID" filter="numeric" title="Id" />
                    <Column field="ProductName" title="Name" />
                    <Column field="UnitPrice" filter="numeric" format="{0:c}" title="Price" />
                    <Column field="UnitsInStock" filter="numeric" title="In stock" />
                </Grid>

                <ProductsLoader
                    dataState={this.state.dataState}
                    onDataRecieved={this.dataRecieved}
                />
            </div>
        );
    }
}

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

In this article

 /