Very simple question, with a seemingly impossible to find answer:

When using gridOptions:{ rowModel: 'serverside'} data is loaded through the getRows callback.

But how can we simply "refresh" the grid, so that it executes the last getRows call again and updates the data in place?

Right now it seems absolutely impossible to do this without calling gridApi.purgeServerSideCache(), however this results in the collapse of all opened row groups which I'd like to avoid for obvious UX reasons.

Very simple question, with a seemingly impossible to find answer:

When using gridOptions:{ rowModel: 'serverside'} data is loaded through the getRows callback.

But how can we simply "refresh" the grid, so that it executes the last getRows call again and updates the data in place?

Right now it seems absolutely impossible to do this without calling gridApi.purgeServerSideCache(), however this results in the collapse of all opened row groups which I'd like to avoid for obvious UX reasons.

• javascript
• angular
• typescript
• ag-grid

1 Answer 1

This link to ag-grid documentation should be helpful: https://www.ag-grid./javascript-grid-server-side-model-grouping/#preserving-group-state

Essentially, the docs state that using gridApi.purgeServerSideCache() is the preferred way to force a reload, but they go on to say the following which should solve the UX concerns you have:

Preserving Group State

It may be necessary to expand groups to a desired initial state or to restore the grid to a previous state after purging / reloading data.

This can be achieved by expanding row nodes as blocks are loaded in the Server-side Datasource. The following snippet outlines a possible approach:

 function getRows(params) {
>     // 1) get data from server
>     var response = getServerResponse(params.request);
> 
>     // 2) call the success callback
>     params.successCallback(response.rowsThisBlock, response.lastRow);
> 
>     // 3) to preserve group state we expand any previously expanded groups for this block
>     rowsInThisBlock.forEach(row => {
>         if (expandedGroupIds.indexOf(row.id) > -1) {
>             gridOptions.api.getRowNode(row.id).setExpanded(true);
>         }
>     }); 
>  }

Notice that in step 3, newly loaded row nodes for the current block are expanded if they are defined in expandedGroupIds, which is an array of group keys maintained by the application. This will have a cascading effect as expanding a group will cause new block(s) to load.

In order to easily look up group row nodes, implementing the following callback is remended: gridOptions.getRowNodeId().