This section describes the Server-Side Datasource and demonstrates how it can be used to lazy-load data from a server through an infinite scroll.
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.
Enabling Server-Side Row Model
When no row model is specified the grid will use the Client-Side Row Model
by default. To use the Server-Side Row Model instead, set the
rowModelType as follows:
Implementing the Server-Side Datasource
A datasource is used by the Server-Side Row Model to fetch rows for the grid. Applications are required to implement a datasource that conforms to the Server-Side Datasource Interface.
The following snippet shows a simple datasource implementation:
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 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
lastRowIndex can be optionally supplied to the grid. If the server knows how many rows
are in the dataset, then
lastRowIndex informs the grid of this number so the grid can adjust
the range of the vertical scrollbar to match the entire dataset contained on the server. Otherwise the
grid will assume the total number of rows is not known and the vertical scrollbar range will grow as
the user scrolls down (the default behaviour for infinite scroll).
Registering the Datasource
The datasource is registered with the grid via the grid api as follows:
Example: Infinite Scroll
The example below demonstrates lazy-loading of data with an infinite scroll. Notice the following:
- The Server-Side Row Model is selected using the grid options property:
rowModelType = 'serverSide'.
- The datasource is registered with the grid using:
- A request is contained in params supplied to
endRow. This is used by the server 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 requests made by the grid for more rows.
The interface for the Server-sie Datasource is show below:
Each time the grid requires more rows, it will call the
The method is passed a
params object that contains two callbacks (one for
success and one for failure) and a request object with details what row the grid
is looking for.
The interface for the
params is shown below:
The request gives details on what the grid is looking for. The success and failure callbacks are not included inside the request object to keep the request object simple data (i.e. simple data types, no functions). This allows the request object to be serialised (e.g. via JSON) and sent to your server.
The interface for the
request is shown below:
Continue to the next section to learn about Server-Side Configuration.