Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

JavaScript Data Grid: SSRM Refresh

This section demonstrates refreshing rows in order to reflect changes at the source while using the Server-Side Row Model (SSRM).

Refresh API

The grid API refreshServerSide(params) instructs the grid to start reloading all loaded rows for a specified group.

refreshServerSide
Function
Refresh a server-side level. If you pass no parameters, then the top level store is refreshed. To refresh a child level, pass in the string of keys to get to the desired level.
refreshServerSide = (
    params?: RefreshServerSideParams
) => void;

interface RefreshServerSideParams {
  // List of group keys, pointing to the level to refresh.
  // For example, to purge two levels down under 'Canada'and then '2002', pass in the string array ['Canada','2002'].
  // If no route is passed, or an empty array, then the top level is refreshed.
  route?: string[];
  // If true, then all rows at the level getting refreshed are immediately destroyed and 'loading' rows will appear.
  // If false, then all rows at the level getting refreshed are kept until rows are loaded (no 'loading' rows appear).
  purge?: boolean;
}

Simple Example

To ensure your grid reflects the latest data on your server, you can periodically instruct the grid to refresh all of the loaded rows (known as polling) or strategically refresh based on your applications requirements.

The following example provides a simple demonstration of the different behaviours of the refresh API, note the following:

  • Using the Refresh button, you can request that all the rows are requested from the server again, bringing them up to date with the server version.
  • Because getRowId has been implemented, the grid is able to detect which rows have been updated, and flash cells when using enableCellChangeFlash.
  • The Purge checkbox enables the purge option in the API call, this causes all rows (and row state) to be reset when the refresh call is made, and replaced with loading rows.

Refreshing Groups

When using row grouping with refreshing you are required to provide a route parameter specifying the row group to refresh. When a row group is refreshed, only its direct child rows are refreshed. This means that in order to refresh the rows in a particular row group, you need to provide the parent of the rows to be refreshed as the route parameter.

The following example demonstrates how to refresh specified groups on the server, note the following:

  • Using the Refresh Root Level button, you can force all the rows in the root level group to refresh, this is equivalent to omitting a route parameter from the refreshServerSide API call.
  • The Refresh ['Canada'] button only refreshes the direct children of the Canada row group.
  • The Refresh ['Canada', '2002'] button only refreshes the direct children of the 2002 row group that belongs to the Canada row group.
  • Because getRowId has been implemented, the grid is able to retain the state for reloaded rows, such as whether a group row was expanded.

Next Up

Continue to the next section to learn how to use Single Row Updates with the SSRM.