RSC Mode Filtering Overview

Premium

In server-side scenarios, filtering is enabled the same as in the client mode of the Grid, but it relies on server actions. When users apply filters, the server takes responsibility for maintaining and processing the filter criteria.

Each time a filter is changed, the onFilterChange callback is fired. In the RSC mode of the Grid, this callback must be declared as async and must start with 'use server'. This ensures the filtering logic executes on the server.

Since filters are managed on the server (for example, using cookies), it is important to persist the filtering state correctly to maintain consistency across page reloads.

tsx

const onFilterChange = async (event: ServerEvent<GridFilterChangeEvent>) => {
    'use server';
    const filterState = event.filter;

    cookies().set(TAG, JSON.stringify(filterState)); // Store the current filter state
};

return <Grid onFilterChange={onFilterChange} filterable={true}></Grid>;

You can see how to handle filtering changes on the server for consistent state persistence in the demo below.

Change Theme

Theme

Loading ...

Suggested Links

• React Data Grid
• KendoReact Grid Filtering Documentation
• KendoReact Grid RSC Mode Server Actions
• КendoReact Grid RSC Mode Overview
• Getting Started with КendoReact Grid RSC Mode