Data Binding

One of the notable advantages of React Server Components is that you can start rendering your component before having your data.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

The server Grid component accepts a Promise, and will render the component shell and a loading state until the data is available.

There are three main properties responsible for binding the data to the Grid:

• data—Represents the data collection that will be rendered in the Grid. It can be either an array or a Promise resolving to an array.
• schema—The schema property plays a crucial role in determining how the data is managed within the Grid. It's important to explicitly define the schema.model.id property, which acts as the identifier for individual data items. If a specific schema is not provided, the Grid automatically searches for an id field to fulfill this identification function.
• state.columns—The columns property defines the columns that will be rendered in the Grid. If no columns are defined, the component will render the columns based on the provided data.

Copy Code<Grid
  data={fetch(`https://demos.telerik.com/kendo-ui/service-v4/odata/Products`)
    .then((resp) => resp.json())
    .then((json) => json.value)}
  schema={{
    model: {
      id: "ProductID",
    },
  }}
  state={{
    columns: [
      { field: "ProductID", title: "ID", width: 50 },
      { field: "ProductName", title: "Name" },
      { field: "Category.CategoryName" },
      { field: "UnitPrice", title: "Price" },
      { field: "UnitsInStock", title: "In stock" },
    ],
  }}
/>

Binding to a Serverless Function

You can bind the Grid component to a serverless function, like Vercel Postgres.

Configuring your application for this functionality requires additional steps beyond the scope of this code snippet. You can refer to the Vercel Postgres guide for more details.

Copy Codeimport { sql } from "@vercel/postgres";

<Grid
  data={sql`SELECT * FROM products`.then((res) => res.rows)}
  schema={{
    model: {
      id: "ProductID",
    },
  }}
  state={{
    columns: [
      { field: "ProductID", title: "ID", width: 50 },
      { field: "ProductName", title: "Name" },
      { field: "Category.CategoryName" },
      { field: "UnitPrice", title: "Price" },
      { field: "UnitsInStock", title: "In stock" },
    ],
  }}
/>;

Suggested Links

• КendoReact Server Components Overview
• Getting Started with КendoReact Server Components