Get Started with KendoReact Grid RSC Mode
Premium

The Server Mode of the KendoReact Grid is distributed as part of the regular KendoReact Grid package.

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

By the end of this tutorial, you will have gained a solid understanding of the fundamental concepts and configuration of the RSC Grid. Additionally, you will have built the following sample app:

Change Theme

Theme

Loading ...

Requirements

Node.js version 18.0.0 or later.
Next.js version 14.0.0 or later, with app router.
React 19

Create a Next.js Project

For the purposes of this tutorial, start by creating an empty Next.js project, ensuring that the routing is enabled (you can use any other RSC-compatible environment, when available):

bash

npx create-next-app my-test-rsc-grid-app --ts --app --no-src-dir

Installation

Next, navigate to the root of your app and install the KendoReact Grid package, along with its dependencies and the default Kendo theme packages:

shell

npm i @progress/kendo-react-grid @progress/kendo-theme-default

Import the Server Grid

To start using the KendoReact Grid RSC mode, simply import the Grid component from the @progress/kendo-react-grid package in your Next.js application. Add the import in the existing page.tsx file:

tsx

// page.tsx

import { Grid, GridColumn } from '@progress/kendo-react-grid';

Import the Theme & Icons

To enhance the visual appearance of the Grid, make sure to import the Kendo Default theme and font icons in your layout file:

tsx

// layout.tsx

import '@progress/kendo-theme-default/dist/all.css';

The Default theme is just one option in the collection of four stunning Telerik and Kendo UI themes. Feel free to explore and experiment with any of these themes to find the perfect visual style for your project.

Load and Show Data

tsx

import products from './gd-products';

const App = () => {
    return <Grid data={products}></Grid>;
};

export default App;

Use the dataset from the demo source files at the top of the guide to create a gd-products.json file locally in your project.
Use an import statement to reference the data file.
Add a <Grid> definition.
Use the data prop to load the data in your Data Grid.

You now have a simple grid that shows all the data from gd-products.json.

Use the Grid on the Server

Now, you can use the KendoReact RSC Mode of the Grid without explicitly including a "use client"; directive.

tsx

// pages.tsx

<Grid data={products}>
    <GridColumn field="ProductID" title="ID" />
    <GridColumn field="ProductName" title="Name" />
    <GridColumn field="Category.CategoryName" title="Category" />
    <GridColumn field="UnitPrice" title="Price" />
    <GridColumn field="UnitsInStock" title="In stock" />
    <GridColumn field="Discontinued" title="Discontinued" />
</Grid>

Handle the Data State Changes

Then the Grid is used in RSC mode, you are able to (and have to) take control over the Data state management updates. This can be done by utilizing the async cookies function available in the next/headers package and using the KendoReact Data Query process helper method.

tsx

// pages.tsx

import { process } from '@progress/kendo-data-query';
import { cookies } from 'next/headers';

const TAG = 'add-a-custom-unique-cookie-name-here';

const getState = () => {
    return JSON.parse(cookies().get(TAG)?.value);
};
const saveState = (state: any) => {
    cookies().set(TAG, JSON.stringify(state));
};
const onDataStateChange = async (event: ServerEvent<GridDataStateChangeEvent>) => {
    'use server';
    saveState(event.dataState);
};

const data = products;
const dataState = getState();
const dataResult = process(data, dataState);

<Grid data={process(data, dataState)} onDataStateChange={handleDataStateChange}>
    ...
</Grid>;

To learn more about how to configure the Grid component, refer to the Grid Overview documentation.

Use the RSC Grid on the Client

In case you would like to use the default mode of the Grid functioning entirely on the client-side, you can include a "use client"; directive on top of the page.

tsx

// pages.tsx

'use client';
import { Grid } from '@progress/kendo-react-grid';

<Grid
    data={data}
    columns={[
        { field: 'ProductID', title: 'ID', width: 50 },
        { field: 'ProductName', title: 'Name' },
        { field: 'UnitPrice', title: 'Price' },
        { field: 'UnitsInStock', title: 'In stock' }
    ]}
/>;