Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: SSRM Configuration

This section covers the Server-Side Row Model (SSRM) configuration options.

SSRM Grid Properties

Applications can fine-tune the Server-Side Row Model based on specific application requirements using the following configurations:

Whether to use Full Store or Partial Store for storing rows. See Row Stores.
Default: full
serverSideStoreType: ServerSideStoreType;

type ServerSideStoreType = 'full' | 'partial'
Provide the serverSideDatasource for server side row model. See Registering the Datasource.
serverSideDatasource: IServerSideDatasource;

interface IServerSideDatasource {
  // Grid calls `getRows` when it requires more rows as specified in the params.
  // Params object contains callbacks for responding to the request. 
  getRows(params: IServerSideGetRowsParams): void;
  // Optional method, if your datasource has state it needs to clean up. 
  destroy?(): void;

interface IServerSideGetRowsParams {
  // Details for the request. A simple object that can be converted to JSON. 
  request: IServerSideGetRowsRequest;
  // The parent row node. The RootNode (level -1) if request is top level.
  // This is NOT part fo the request as it cannot be serialised to JSON (a rowNode has methods). 
  parentNode: RowNode;
  // Success callback, pass the rows back to the grid that were requested. 
  success(params: LoadSuccessParams): void;
  // Fail callback, tell the grid the call failed so it can adjust it's state. 
  fail(): void;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;

interface IServerSideGetRowsRequest {
  // First row requested or undefined for all rows. 
  startRow: number | undefined;
  // Last row requested or undefined for all rows. 
  endRow: number | undefined;
  // Columns that are currently row grouped. 
  rowGroupCols: ColumnVO[];
  // Columns that have aggregations on them. 
  valueCols: ColumnVO[];
  // Columns that have pivot on them. 
  pivotCols: ColumnVO[];
  // Defines if pivot mode is on or off. 
  pivotMode: boolean;
  // What groups the user is viewing. 
  groupKeys: string[];
  // If filtering, what the filter model is. 
  filterModel: any;
  // If sorting, what the sort model is. 
  sortModel: SortModelItem[];

interface ColumnVO {
  id: string;
  displayName: string;
  field?: string;
  aggFunc?: string;

interface SortModelItem {
  // Column Id to apply the sort to. 
  colId: string;
  // Sort direction 
  sort: 'asc' | 'desc';

interface LoadSuccessParams {
  // Data retrieved from the server as requested by the grid. 
  rowData: any[];
  // The last row, if known, to help Infinite Scroll (i.e Partial Store) and Pagination. 
  rowCount?: number;
  // Any extra information for the grid to associate with this load. 
  storeInfo?: any;
(Partial Store only) How many rows for each block in the store, i.e. how many rows returned from the server at a time.
Default: 100
(Partial Store only) How many blocks to keep in the store. Default is no limit, so every requested block is kept. Use this if you have memory concerns, and blocks that were least recently viewed will be purged when the limit is hit. The grid will additionally make sure it has all the blocks needed to display what is currently visible, in case this property is set to a low value.
How many requests to hit the server with concurrently. If the max is reached, requests are queued. Set to -1 for no maximum restriction on requests.
Default: 2
How many milliseconds to wait before loading a block. Useful when scrolling over many rows, spanning many Partial Store blocks, as it prevents blocks loading until scrolling has settled.
When enabled, closing group rows will remove children of that row. Next time the row is opened, child rows will be read from the datasource again. This property only applies when there is Row Grouping.
Default: false
When enabled, always refreshes top level groups regardless of which column was sorted. This property only applies when there is Row Grouping.
Default: false
When enabled, always refreshes stores after filter has changed. Used by Full Store only, to allow Server-Side Filtering.
Default: false
Allows setting the child count for a group row.
getChildCount = (dataItem: any) => number;
Allows providing different params for different levels of grouping.
getServerSideStoreParams = (
    params: GetServerSideStoreParamsParams
) => ServerSideStoreParams;

interface GetServerSideStoreParamsParams {
  // The level of the store. Top level is 0. 
  level: number;
  // The Row Node for the group that got expanded, or undefined if top level (ie no parent) 
  parentRowNode?: RowNode;
  // Active Row Group Columns, if any. 
  rowGroupColumns: Column[];
  // Active Pivot Columns, if any. 
  pivotColumns: Column[];
  // true if pivot mode is active. 
  pivotMode: boolean;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;

interface ServerSideStoreParams {
  // What store type to use.
  // If missing, then defaults to grid option `serverSideStoreType`. 
  storeType?: ServerSideStoreType;
  // For Partial Store only.
  // How many blocks to keep in cache.
  // If missing, defaults to grid options `maxBlocksInCache`. 
  maxBlocksInCache?: number;
  // For Partial Store only.
  // Cache block size.
  // If missing, defaults to grid options `cacheBlockSize`. 
  cacheBlockSize?: number;

type ServerSideStoreType = 'full' | 'partial'
Allows groups to be open by default.
isServerSideGroupOpenByDefault = (
    params: IsServerSideGroupOpenByDefaultParams
) => boolean;

interface IsServerSideGroupOpenByDefaultParams {
  data: any;
  rowNode: RowNode;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
Allows cancelling transactions.
isApplyServerSideTransaction = (
    params: IsApplyServerSideTransactionParams
) => boolean;

interface IsApplyServerSideTransactionParams {
  // The transaction getting applied. 
  transaction: ServerSideTransaction;
  // The parent RowNode, if transaction is applied to a group. 
  parentNode: RowNode;
  storeInfo: any;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
SSRM Tree Data: Allows specifying which rows are expandable. See SSRM Tree Data.
isServerSideGroup = (dataItem: any) => boolean;
SSRM Tree Data: Allows specifying group keys. See SSRM Tree Data.
getServerSideGroupKey = (dataItem: any) => string;

Debug Info

When experimenting with different configurations it is useful to enable debug mode as follows:

const gridOptions = {
    debug: true,

    // other grid options ...

The screenshot below is taken from the browser's dev console when debug is enabled:

Console Output

Notice that the current cache status is logged showing block details such as the startRow and endRow.

This can be very useful when debugging issues on the server.

Custom Partial Store

The example below shows a customised SSRM using the Partial Store. Note the following:

  • The grid property serverSideStoreType = partial, which gets the Partial Store to be used. The grid loads rows one block at a time as the user scrolls down.
  • The grid property cacheBlockSize = 50. This sets the block size to 50, thus rows are read back 50 at a time.
  • The grid property maxBlocksInCache = 2. This means the grid will keep two blocks in memory only. To see this in action, scroll past row 100 (which will require a third block to be loaded), then quickly scroll back to the start and you will observe the first block needs to be reloaded.
  • The grid property rowBuffer = 0. This means the grid will not render any rows outside the vertical scroll. This is good for demonstrating this example, as otherwise the loading could appear outside of the visible area and make the example more difficult to understand. See DOM Virtualisation for more information on setting the rowBuffer property.

Custom Loading Debounce

The example below demonstrates debouncing the block loading. Note the following:

  • The response from the server sets the rowCount property so that the vertical scrollbars bounds are set such that the entire dataset can be scrolled through. In other words, infinite scrolling is turned off, however rows are still loaded in blocks.
  • blockLoadDebounceMillis = 1000 - loading of blocks is delayed by 1000ms. This allows for skipping over blocks when scrolling to advanced positions.
  • The grid property debug = true. This means the browser's dev console will show loading block details.

Next Up

Continue to the next section to learn about Sorting.