OData Server Operations

Premium

You can bind the Grid to data and then sort, filter, or paginate it using the OData service.

Using useODataDataSource

The useODataDataSource hook of the DataSource component simplifies the integration of the KendoReact Grid with OData services by automatically handling the specifics of the OData protocol. This includes managing query parameters for sorting, filtering, paging, and other data operations.

Steps to bind the Grid to OData service using the useODataDataSource hook:

1. Ensure you have the necessary dependencies installed:

   bash

   npm install @progress/kendo-react-grid @progress/kendo-data-query

2. Define the base URL of your OData service. This URL will be used to fetch data from the server.

   jsx

   const baseUrl = 'https://demos.telerik.com/kendo-ui/service-v4/odata';

3. Import and configure the useODataDataSource hook in your component. The hook requires the OData service URL and an initial DataState configuration.

   jsx

   const result = useODataDataSource({
       transport: {
           read: {
               url: baseUrl
           }
       }
   });

4. Pass the data returned by the useODataDataSource hook to the Grid's data property. Additionally, handle the onDataStateChange event to update the Grid's state.

The following example demonstrates how to configure and use the useODataDataSource hook with the KendoReact Grid:

Change Theme

Theme

Loading ...

Using toODataString

You can also apply data operations on the server by processing the parameters by utilizing the toODataString function, which is part of the Data Query package. This function converts the Grid's state into an OData-compliant query string.

Steps to request by using and process data by utilizing toODataString and handling the [onDataStateChange] event:

1. Configure the KendoReact Grid to use DataState. The DataState contains information about the current page, filter and sort expressions, grouping, and aggregates.

2. Handle the onDataStateChange event. When this event is triggered, it returns the DataState object, which you will use to track the current state of the Grid.

3. Use the toODataString helper method with the current DataState to create the OData query string. This query string will be used to request data from the server.

Note that the toODataString helper method does not support grouping. To add grouping information in the query, you can use the generated query string and manually include the grouping information by using the group descriptors within the DataState.

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.

Change Theme

Theme

Loading ...

Suggested Links

• React Data Grid
• React DataSource Overview
• Remote Data Operations
• Data Query Overview
• API Reference of the Grid
• API Index of the Grid