RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/grid/rsc-mode/grouping below:

React Data Grid RSC Mode Grouping

Premium

In server-side scenarios, the grouping logic works similarly to grouping in the client mode of the Grid, but with server actions. When the user modifies the grouping state or expand a group, the server is responsible for saving and managing the grouped data.

The RSC Mode of the Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

When grouping changes occur, the onGroupChange and the onDataStateChange callbacks are triggered.

In the RSC mode of the Grid, this callback must be marked as async and include 'use server' at the top. This ensures that grouping state is handled on the server side.

Since the grouping state is stored on the server (such as in cookies), you must ensure proper state management to maintain consistent grouping across page reloads.

tsx

const onGroupChange = async (event: ServerEvent<GridGroupChangeEvent>) => {
    'use server';
    const groupedState = event.group;

    cookies().set(TAG, JSON.stringify(groupedState)); // Save current grouping state
};

return <Grid onGroupChange={onGroupChange} groupable={true} dataItemKey={dataItemKey}></Grid>;

Below you can see an example of handling grouping changes on the server to maintain consistent state across reloads.

Change Theme

Theme

Loading ...