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.
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
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.
api.refreshCells(rowNodes, colIds) will refresh particular cells. In this
instance, all other cells on that row will stay intact.
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:
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.
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.
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: