Search

Vue Data GridSSRM Refresh

Enterprise

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

It is advised to use Row IDs when using Server-Side Refresh. Row IDs allow the grid to retain row state between refreshes, such as row height, expanded state, and cell flashing.

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 store 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. Once the store refresh is complete, the storeRefreshed event is fired.

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 Row IDs have 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 all row state except row selection state) to be reset when the refresh call is made, and replaced with loading rows.
  • When a refresh is finished, note the storeRefreshed event is fired, and logged in the console. This is not fired when the purge option is enabled as the rows are reset not refreshed.

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 Row IDs have been implemented, the grid is able to retain the state for reloaded rows, such as whether a group row was expanded.
  • When a refresh is finished, note the storeRefreshed event is fired, and logged in the console.

Next Up

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