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/sorting below:

React Data Grid RSC Mode Sorting

Premium

When the Grid is used in server mode, sorting is configured and behaves like the sorting in the client mode of the Grid, but it relies on server actions. When a user sorts a column, the server handles storing and processing the sorting rules.

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

Each time a sorting action is performed, the onSortChange 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 to ensure proper execution on the server.

The sorting state has to be managed on the server (for example, in cookies) therefore you should persist the sorting state correctly to maintain the user’s preferences across page reloads.

tsx

const onSortChange = async (event: ServerEvent<GridSortChangeEvent>) => {
    'use server';
    const sortState = event.sort;

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

return <Grid onSortChange={onSortChange} sortable={true} dataItemKey={dataItemKey}></Grid>;

Here is an example demonstrating how to manage sorting state on the server for consistent user experience.

Change Theme

Theme

Loading ...