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

React Data Grid RSC Mode Paging

Premium

In server-side scenarios, paging in the Grid works similarly to paging in the client mode, but with server actions. When the user navigates between pages, the server is responsible for storing and managing the current page state.

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 a paging action occurs, the onPageChange 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 the paging state is handled on the server side.

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

tsx

const onPageChange = async (event: ServerEvent<GridPageChangeEvent>) => {
    'use server';
    const pagingState = event.page;

    cookies().set(TAG, JSON.stringify(pagingState)); // Save current page state
};

return <Grid onPageChange={onPageChange} pageable={true} dataItemKey={dataItemKey}></Grid>;

Here is an example of handling paging changes on the server to maintain consistent state across reloads.

Change Theme

Theme

Loading ...