Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

JavaScript Data Grid: SSRM Datasource

This section describes the Server-Side Datasource and demonstrates how it is used to load data from a server.

The Server-Side Row Model requires a datasource to fetch rows for the grid. When users scroll or perform grid operations such as sorting or grouping, more data will be requested via the datasource.

Most of the Server-Side Row Model examples include a fake server that generates SQL to imitate how a real server might use the requests sent from the grid. These examples use AlaSQL which is a JavaScript SQL database that works in browsers.

However, note that the Server-Side Row Model does not impose any restrictions on the server-side technologies used.

Enabling Server-Side Row Model

The Client-Side Row Model is the default Row Model. To use the SSRM instead, set the rowModelType as follows:

const gridOptions = {
    rowModelType: 'serverSide',

    // other grid options ...
}

Implementing the Server-Side Datasource

A datasource is used by the SSRM to fetch rows for the grid.

Properties available on the IServerSideDatasource interface.

getRows
Function
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;

interface IServerSideGetRowsParams<TData = any> {
  // 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: IRowNode;
  // 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<TData>;
  // 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.
  rowCount?: number;
  // Any extra information for the grid to associate with this load.
  groupLevelInfo?: any;
}
destroy
Function
Optional method, if your datasource has state it needs to clean up.
destroy = () => void;

The following snippet shows a simple datasource implementation:

const createDatasource = server => {
    return {
        // called by the grid when more rows are required
        getRows: params => {

            // get data for request from server
            const response = server.getData(params.request);

            if (response.success) {
                // supply rows for requested block to grid
                params.success({
                    rowData: response.rows
                });
            } else {
                // inform grid request failed
                params.fail();
            }
        }
    };
}

Notice that the datasource contains a single method getRows(params) which is called by the grid when more rows are required. A request is supplied in the params object which contains all the information required by the server to fetch data from the server.

Rows fetched from the server are supplied to the grid via params.success(data).

Registering the Datasource

The datasource is registered with the grid via either a) the grid property serverSideDatasource or b) the grid API.

Registering the datasource with via grid options is done as follows:

const gridOptions = {
    serverSideDatasource: myDatasource,

    // other grid options ...
}

Alternatively, the datasource can be registered via the grid API:

gridOptions.api.setServerSideDatasource(myDatasource);

The example below demonstrates loading rows using a simple SSRM Datasource. Note the following:

  • The Server-Side Row Model is selected using the grid options property: rowModelType = 'serverSide'.
  • The datasource is registered with the grid using: api.setServerSideDatasource(datasource).
  • A request is contained in params supplied to getRows(params) with startRow and endRow to determine the range of rows to return.
  • When scrolling down there is a delay as more rows are fetched from the server.
  • Open the browser's dev console to view the contents of the request made by the grid for rows.

Next Up

Continue to the next section to learn about Configuration.