OData Server OperationsPremium
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:
-
Ensure you have the necessary dependencies installed:
bashnpm install @progress/kendo-react-grid @progress/kendo-data-query
-
Define the base URL of your OData service. This URL will be used to fetch data from the server.
jsxconst baseUrl = 'https://demos.telerik.com/kendo-ui/service-v4/odata';
-
Import and configure the
useODataDataSource
hook in your component. The hook requires the OData service URL and an initialDataState
configuration.jsxconst result = useODataDataSource({ transport: { read: { url: baseUrl } } });
-
Pass the data returned by the
useODataDataSource
hook to the Grid'sdata
property. Additionally, handle theonDataStateChange
event to update the Grid's state.
The following example demonstrates how to configure and use the useODataDataSource
hook with the KendoReact Grid:
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:
-
Configure the KendoReact Grid to use
DataState
. TheDataState
contains information about the current page, filter and sort expressions, grouping, and aggregates. -
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. -
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 theDataState
.
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.