Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

View Refresh

If you want to change the data in the grid, the best way to do it is use the grid's data update functions.

However sometimes the data inside your model will change and you just want to tell the grid to update without changing the data. For example, suppose you set a bunch of 10 'car' records into the grid, with each car having 'make', 'model' and 'price' attributes. The grid does not copy the records, rather it wraps each on in a rowNode object. That means that if you make any changes to the 'car' record, the record inside the grid will also be updated. So you might change the record in another part of your application, and then require the grid to refresh it's cells.

If you are using Angular or React to build your cells (eg using an Angular or React cellRenderer), then you may be benefiting from binding that your framework provides. If you are, then you might be wondering what all this refresh rubbish is all about and do you need it? If your cells are keeping up to date with the help of your chosen framework, that is totally fine if you are happy with it. This section explains how to refresh outside of the context of your framework.

Full Grid Refresh

The easiest way to get the grid to refresh it's view is to call api.refreshView(), which will refresh everything. Refreshing the entire view works very fast so this 'on method to refresh everything' may work for you every time you want to refresh just the smallest item.

Refresh Rows

The method api.refreshRows(rowNodes) will refresh particular rows. In this instance, the grid will rip the rows out of the dom and draw in new rows from scratch.

Refresh Cells

The method api.refreshCells(rowNodes, colIds) will refresh particular cells. In this instance, all other cells on that row will stay intact.

Example - Simple Refresh

The grid below shows the above three options in action. The grid's columns 'Make' and 'Model' have cellRenderers that also display the timestamp the cell was rendered, so you can see when the cell is rendered again. The example demonstrates the following:

  • Refresh All: All cells get refreshed.
  • Double Jillian: Jillian's rows get completely refreshed.
  • Double Niall: The 'Price' column only in Niall's rows get refreshed.

Volatile Cells

In addition to the api.refreshView() call, there is also a similar api.softRefreshView() call. The soft refresh differs in the following ways:

  • The rows are left intact, only the contents of the cells are redrawn.
  • Only cells marked as volatile are redrawn.

Cells are marked as volatile by setting the attribute on the column definition.

This can give a performance increase, however refreshing the entire grid works really fast anyway. The real benefit of this is not destroying cells that the user may be interacting with for inputting data. For example you could have a cell that the user is placing some text into which then other cells are reflecting changes in, such as some formula that get re-run as the user is typing in text.

Volatile Cells Example

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.

Cell Refresh from Inside

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.

Refresh Headers and Footers

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.

Headers, Footers and Cell Refresh Example

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.