View Refresh

The grid has change detection. So as long as you are updating the data via the grid's API,
the values displayed should be the most recent up to date values.

However sometimes you may be updating the data outside of the grids control. When
you give data to the grid, the grid will not make a copy. Thus if you change the value
of the data outside of the grid, the grid will also be impacted by that data change.

To deal with the scenario where the row data is changed without the grid been aware,
the grid provides the following methods:

Refresh Cells: api.refreshCells(cellRefreshParams) - Gets the grid to refresh all cells. Change detection will
be used to refresh only cells who's display cell values are out of sync with the actual value.
If using a cellRenderer with a refresh
method, the refresh method will get called.

Redraw Rows: api.redrawRows(redrawRowsParams) - Removes the rows from the DOM and draws them again from scratch.
The cells are created again from scratch. No change detection is done. No refreshing of cells
is done.

Your preference should be to use refreshCells() over redrawRows().
Only use redrawRows() if you find refreshCells() doesn't
suit your needs.

Refresh Cells

To get the grid to refresh the cells, call api.refreshCells(). The interface is as follows:

Each parameter is optional. The simplest is to call with no parameters which will refresh
all cells using change detection (change
detection means it will only refresh cells who's values have changed).

Deprecated - Volatile Columns

Volatile columns allowed you to mark specific columns for refresh when you called
api.softRefresh().

This feature is no longer needed, as you can pass a list of columns to refresh
to the 'cellRefresh()' method.

If you are using volatile columns, instead of calling api.softRefresh(),
you can call api.refreshCells({volatile: true}) instead to achieve the same.
However volatile columns are deprecated so will be removed in a future release.
You should instead move to passing a list of columns to the api.refreshCells()
method.

Example Refresh Cells

Below shows calling api.refreshCells() with different scenarios using a mixture of the
rowNodes, columns and force parameters. From the example, the
following can be noted:

The grid has enableCellChangeFlash=true, so cells that are refreshed will be flashed.

The grid has two pinned rows at the top and two pinned rows at the bottom. This is to demonstrate
that cell refreshing works for pinned rows also.

The three buttons each make use of a scramble operation. The scramble operation selects
50% of the cells at random and assigns new values to them. This is done outside of the grid so the
grid has not been informed of the data changes. Each button then gets the grid to refresh in a
different way.

The Scramble & Refresh All button will scramble the data, then call
api.refreshCells(). You will notice that randomly half the cells will flash as
the change detection only update the cells who's underlying values have changed.

The Scramble & Refresh Left to Right button will scramble as before, then call
api.refreshCells({columns}) 5 times, 100ms apart, once for each column. This will show the
grid refreshing one column at a time from left to right.

The Scramble & Refresh Top to Bottom button will scramble as before, then call
api.refreshCells({rowNodes}) 20 times, 100ms apart, once for each row (including pinned rows).
This will show the grid refreshing one row at a time from top to bottom.

The checkbox Force Refresh sets how the above three refreshes work. If checked, all the cells
will get refreshed regardless of whether they have changes. In other words, change detection will not
but used as part of the refresh.

You may be wondering why would you want to force refresh, what is the point in refreshing a cell that
has no changes? The answer is to do with cells that don't show underlying data or depend on something other
than just the underlying data. One example is a cell that might contain action buttons (add, delete, send etc)
and you might want to disable the action buttons if the logged in user changes role (if roles are tied to the
functions), or if it's past 5pm and you don't want to allow such operations past a certain time. In this case
you may wish to update the cells even though the underlying data has not changed.

Redraw Rows

Redraw rows is a much heavier operation than refreshing cells. If refreshing cells meets your needs, then don't
use redraw rows. A row redraw will rip the row out of the DOM and draw it again from scratch.

Use redraw row if you want to create the row again from scratch. This is useful when you have changed a property
that only gets used when the row is created for the first time such as:

Example Redraw Nodes

Below shows calling api.redrawRows() with different to change the background color of the rows.
From the example, the following can be noted:

The Redraw All Rows redraws all the rows using a different background color by calling
api.redrawRows() with no parameters.

The Redraw Top Rows redraws only the top half of the rows by calling api.redrawRows({rowNodes}).

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →