Data Operations

The KendoReact Server Grid supports basic data operations like filtering, sorting, and paging either on the client or on the server.

• Filtering
• Sorting
• Paging

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

You can also find useful samples demonstrating the combination between client-and server-side functionality of the Grid in the Client-Side and Hybrid Data Operations section at the end of this article.

Handling Data Operations

Regardless of whether you are using filter, sorting, paging or a combination of these operations, the KendoReact Server Grid will trigger the onStateChange callback with the newly updated state.

The recommended approach is to handle this callback with a server action and update the server state, either by utilizing any server-client communication mechanisms like headers or cookies or managing the state in memory.

Through cookies

The example code snippet below demonstrates state management through cookies. The sample code keeps the state in cookies, updates it on every onStateChange callback, and triggers a page refresh with a cookies() call.

Copy Codeexport default async function Page() {
  const state = JSON.parse(cookies().get("grid-state")?.value || JSON.stringify(defaultState));

  const handleStateChange = async (newState: GridState) => {
    "use server";

    // Update the server state. Page refresh will be triggered automatically.
    cookies().set("grid-state", JSON.stringify(newState));
  };

  return (
    <>
      <Grid
        // ...
        onStateChange={handleStateChange}
        state={state}
      />
    </>
  );
}

In memory

The following code snippet showcases how to keep the state in memory, update it on every onStateChange callback, and trigger the revalidatePath to re-fetch the page's data.

Storing the state in memory results in a shared state between all client instances of your application. This means that any modification made by one client to the state will be reflected and visible to all other clients, ensuring synchronization of the updated state across the entire application.

Copy Codelet state = defaultState;

export default async function Page() {
  const handleStateChange = async () => {
    "use server";

    // Update the server state
    state = newState;

    // Re-fetch the page's data
    revalidatePath("/current-page");
  };

  return (
    <Grid
      // ...
      state={state}
      onStateChange={handleStateChange}
    />
  );
}

For more information on how to re-validate data in Next.js, refer to the official documentation.

Filtering

The built-in filtering UI of the KendoReact Server Grid can be toggled by providing a filter field to the state property of the component.

Handling the onStateChange event and passing the new state to the Grid component results in the filtering UI being updated correctly.

Copy Codeconst defaultState = {
    filter: {
      logic: "and",
      filters: [],
    },
  }

<Grid
  // ...
  state={defaultState}
/>

The filter field accepts an object with the following properties:

• logic—The logical operation to use when filtering. The supported values are:
  • and—The logical AND operation.
  • or—The logical OR operation.
• filters—The array of FilterDescriptors to apply. Each filter has the following properties:
  • field—The field to which the filter operator is applied.
  • operator—The filter operator (comparison).
  • value—The value to which the field is compared. Has to be of the same type as the field.

For in-depth information, explore the CompositeFilterDescriptor and FilterDescriptor interfaces.

Example: Grid with server-side filtering

Sorting

The default sorting UI of the KendoReact Server Grid can be toggled by providing a sort field to the state property of the component.

Handling the onStateChange and passing the new state to the Grid component results in the sorting UI being updated correctly.

Copy Codeconst defaultState = {
    sort: [],
  }

<Grid
  // ...
  state={defaultState}
/>

The sort field accepts an array of SortDescriptor objects. Each SortDescriptor has the following properties:

• field—The field to which the sort operator is applied.
• dir—The sort direction. The supported values are:
  • asc—The ascending sort order.
  • desc—The descending sort order.

For in-depth information, explore the SortDescriptor interface.

Example: Grid with server-side sorting

Paging

You can toggle the default paging UI of the KendoReact Server Grid by providing a skip, take and total fields to the state property of the component.

Handling the onStateChange and passing the new state to the Grid component results in the paging UI being updated correctly.

Copy Codeconst defaultState = {
    skip: 0,
    take: 10,
    total: 100,
  }

<Grid
  // ...
  state={defaultState}
/>

The skip, take and total fields accept a number representing the number of records to skip and take respectively.

Example: Grid with server-side paging

Client-Side and Hybrid Data Operations

In the context of KendoReact Server Components, hybrid data operations are a blend of both client- and server-side operations. The remarkable aspect of the KendoReact Server Grid is the flexibility it offers, allowing you to decide whether certain actions should take place on the server or on the client. This grants you significant control over the performance of the component.

To perform data operations on the client, you must send a copy of the data collection to the client. This is done by providing a DataProvider to the Grid component.

Copy Code<Grid 
  // ...
  DataProvider={CustomDataProvider}
/>

The following examples further illustrate the flexibility of the KendoReact Server Grid component. These samples demonstrate how to seamlessly integrate client-side sorting with server-side filtering and vice versa.

In addition to exploring the source code of the demos provided below, you can interact with the filtering and sorting functionality of both Grids to observe the variations in loading times in both scenarios.

Example: Grid with server-side filtering and client-side sorting

Example: Grid with client-side filtering and server-side sorting

Additional Resources

• КendoReact Server Grid Overview
• Getting Started with KendoReact Server Grid