RSC Mode Server Actions

Premium

The RSC architecture introduces server actions, which are seamlessly integrated in the server mode of the KendoReact Grid.

Server-actions compatibility allows passing functions to the component's callbacks, such as onDataStateChange or onItemChange, enabling the execution of custom server-side logic.

Available Server Actions

In the server mode of the Grid, the events fall into two categories:

1. Data state change related events:
   • onFilterChange
   • onSortChange
   • onPageChange
   • onGroupChange
   • onDataStateChange—triggered when either one of the onFilterChange, onSortChange, onPageChange or onGroupChange events occurs.
2. Grid state operation related events:
   • onSelectionChange
   • OnGroupExpandChange
   • OnDetailExpandChange
   • OnEditChange

Server Actions Configuration

To use event handlers on a server page, you can use the same setup as you would for a Grid on a client page. The key differences are:

• Event handlers must be marked as async and include 'use server' at the top.
• Non-serializable event arguments should be wrapped inside a ServerEvent<T> type to ensure compatibility.

Client event arguments such as nativeEvent, syntheticEvent, target, targetEvent, and focusElement cannot be serialized to the server and will always be undefined.

Here is an example of a server action managing the Grid’s data state:

tsx

const onDataStateChange = async (event: ServerEvent<GridDataStateChangeEvent>) => {
    'use server';

    cookies().set(TAG, JSON.stringify(event.dataState)); //save state
};

return <Grid onDataStateChange={onDataStateChange} dataItemKey={dataItemKey}></Grid>;

Change Theme

Theme

Loading ...

Limitations

Client-only Events

There are some current events of the Grid that only make sense in a client scenario. As a result, the following events will not be triggered when the Grid is used as a server component:

• onScroll,
• onKeyDown,
• onContextmenu,
• onNavigationAction,
• onClipboard
• OnColumnResize

Suggested Links

• React Data Grid
• КendoReact Grid RSC Mode Overview
• Getting Started with КendoReact Grid RSC Mode