syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Server-side row model

In this model, the server calculates grouping and pivots and supplies rows for each expanded group path. Its data responsibilities differ from grouping already loaded local rows with groupBy.

Markdown source Features

How it works and when to use it

serverSideDatasource.getRows receives the request and success/failure callbacks as separate arguments. Do not confuse it with params.success in the Infinite datasource.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Connect group requests

Prepare the server to interpret group paths, filters, and sorting and return rows and rowCount.

javascript
grid.serverSideDatasource = { getRows: async (request, success, fail) => {
  try {
    const response = await fetch('/api/orders/groups', { method: 'POST',
      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(request) });
    if (!response.ok) throw new Error('Query failed');
    success(await response.json());
  } catch { fail(); }
}};

Verify the result: Initially the server supplies top-level data; expanding a group requests data for that path. Review ServerSideGetRowsParams and Result as part of the server contract.

Example 2. Selection with partially loaded data

Use server selection state to include orders that have not yet been downloaded.

javascript
console.log(await grid.getServerSideSelectionState());
console.log(await grid.getServerGroupSelectionState());

Verify the result: Distinguish displayed row IDs from server-wide selection rules. Your app's bulk-operation API must understand those rules too.

Example 3. Inspect caches and processing results

When an expanded group looks empty, inspect which stores have loaded.

javascript
console.log(await grid.getServerSideStoreState());
console.log(await grid.getServerPivotResultColumns());

Verify the result: Inspect group store state separately from server-supplied pivot columns. Also check that server aggregate column names match the response data keys.

Combining features and troubleshooting

Do not use regular client applyTransaction to change all unloaded server rows. Use server changes and the server-specific transaction or requery flow.

Distinguish group counts from leaf order counts and pivot result columns from source columns. An incorrect rowCount for an expanded path also affects loading and selection.

Related reading