When the underlying data is changed for the grid, you can get the grid to refresh. The easiest way is to call api.refreshView(), which will refresh the entire table. Refreshing the entire view works very fast - this is in fact what is getting done as you are scrolling over large data - the DOM is been constantly redrawn with the rows as they come into the viewable area.
Even with lightening speed, this may not be what you want, as this will loose any context or state you may have in any of your cells. This can be a problem if a) the cell required time to build, such as requiring data from the server, and rebuilding such a cell would cause a visible redraw on the screen or b) the cell has a state or context, such as the cell is currently being edited, or the cell has been interacted with in some way that deviates it from the default initial representation.
This section goes through the options available as an alternative to calling api.refreshView().
To refresh the grid, you can choose between the following options:
Each data item in ag-Grid is wrapped by a rowNode. The rowNode has two methods for refreshing that that it is wrapping:
In addition to the api.refreshView() call, there is also a similar api.softRefreshView() call. The soft refresh differs in the following ways:
Cells are marked as volatile by setting the attribute on the column definition.
The example below shows refreshing in action. The weekday columns are editable. As you edit the cells, the numbers on the right has side change. The volatile summary change as the cells change, as the columns are marked as volatile and the grid onCellValueChanged() function is calling api.softRefresh()
Note that the class rules are reapplied as the total and value change, marking the value as bold and red it if goes above the threshold.
You can request a cell to be refreshed from within by calling the params.refreshCell() function passed to the cell renderer. This is handy if the cell wants to refresh itself and / or get the cell style rules reapplied.
This can be handy if the cell gets itself into a state it wants to get out for. For example, you could have your own custom editing, and when the data has finished editing, you cal 'refreshCell()' will is a handy way to get the grid to rip the cell out and put it back again to the fresh 'non-editing' state.
If you call api.recomputeAggregates(), all header and footer rows will subsequently get ripped out and redrawn to show the new aggregate values. If you want to refresh all headers and footers without recomputing the aggregates, you can call api.refreshGroupRows() - useful if you want to refresh for reasons other than the aggregates being recomputed.
The example below demonstrates the following features:
Cell Refresh: As you hit + and - below, the containing cell updates the record and calls api.refreshCell(). This gets the cell to redraw and have it's css rules reapplied - marking the cell as red if the value goes above a threshold.
Aggregate Refresh: As the values change, the table is also recomputing the aggregates, which in turn get redrawn.