RSC Mode Selection Overview

Premium

In server-side scenarios, the selection logic works similarly to the selection in the client mode of the Grid, but with server actions. After the selection changes, the server is responsible for saving the state and managing the logic for the selected rows.

When the user selects rows, the onSelectionChange callback is triggered. In RSC mode of the Grid, it is important that this callback is marked as async and includes 'use server' on top. This ensures that the selection state is handled on the server side.

Since the selection state is stored on the server (such as in cookies), you must ensure that the server's state management is handled correctly to maintain the user’s selection across page reloads.

tsx

const onSelectionChange = async (event: ServerEvent<GridSelectionChangeEvent>) => {
    'use server';
    const selectedRows = event.select;

    cookies().set(TAG, JSON.stringify(event.select)); //save current selection state
};

return <Grid onSelectionChange={onSelectionChange} selectable={true} dataItemKey={dataItemKey}></Grid>;

Here is an example of handling the selection change on the server, ensuring that the selection is consistent across page reloads.

Change Theme

Theme

Loading ...

Suggested Links

• KendoReact Grid Selection Documentation
• KendoReact Grid RSC Mode Server Actions
• КendoReact Grid RSC Mode Overview
• Getting Started with КendoReact Grid RSC Mode