Ag-grid: Accessing and Updating Data

Tram Ho


Following the content from the previous section on Client Side Data and Server Side Data , in this part, I will continue the introduction of Accessing and Updating process in Ag-grid.

Accessing Data

For each data that is passed into the Grid, the Grid encapsulates each data item in a rowNode object. For example, if data is passed with 20 rows, then Grid will generate 20 rowNode objects respectively, each rowNode will contain 1 data item.

rowNode is also quite convenient to evaluate it to these rowNode . For example, if we want to select 1 row, we can use rowNode.setSelected(true)

Accessing Row Node API Methods

There are many different ways to access rowNode , which are included in the following table:

API Methodsdescription
getRowNode (id)Returns rowNode with the corresponding id . Id of rowNode is the result of the callback getRowNodeId(data) , otherwise the id will be automatically generated by Grid when row data is set.
forEachNode ((node, index))Run the loop through each node (row) in the Grid. This function works similar to forEach of javascript array, it calls to each node, bypassing the filtering or sorting any that have previously applied to the Grid. If using infinite rowModel , then it will be called for each loaded page corresponding to each page cache
forEachNodeAfterFilter ((node, index))The mechanism is the same as forEachNode() except that it ignores all filtered data
forEachLeafNode ((node, index))The mechanism is the same as forEachNode() , except that it will list all the leaf nodes. It browses through all the data transferred to the grid before the grid performs grouping
getDisplayedRowAtIndex (index)Returns the rowNode displayed at the position that matches the index value passed
getDisplayedRowCount ()Returns the total number of rows displayed
getFirstDisplayedRow ()Get the index value of the row displayed first during scrolling (including rows not shown in the buffer)
getLastDisplayedRow ()The mechanism is the same as the getFirstDisplayedRow() function but is the index of the last row

Accessing RowNode by ID

The simplest way to retrieve a rowNode is by its id . Id generated by using getRowNodeId() callback or generated by Grid’s internal sequence:

rowNode 1 rowNode by id only allowed in the Client-side Row Model

Iterating Rows

To run the loop through all the rowNode in the Grid, we can use grid’s iteration APIs. These iteration APIs will run through all rowNode , regardless of whether rowNode is displayed or not. For example, if a group is grouped and the group is closed, the Grid will not display the children of that group, but these children will still be included in the “for-each” iteration function:

  • eg practical about using for-each: link
  • eg practically about how displayed displayed row: link

All of the above methods can be used with the Client-side Row Model . For other rowModel (Viewport, Infinite and Server-side), only one method is api.forEachNode() and it will return only the rowNode loaded in the browser’s memory.

Updating Data

Updating RowNodes Data

We can directly set the data of rowNode with API methods:

  • rowNode.setData(data) : change the data of rowNode , Grid will refresh the entire rendered row being displayed after the set data process is complete.
  • rowNode.setDataValue(colKey, value) : changes the data of rowNode in a specified column. After the data set process is complete, the Grid will only refresh the rendered cell of the required row.

rowNode via the rowNode methods above is supported with all row models. This process will refresh required rows if they are being displayed, but the grids sorting, filtering or grouping functions will not be updated. So we need to use update transactions.

If you are using the Client-side Row Model and you want the Grid to update sorting or filtering as soon as the update is complete, you must call api.refreshClientSideRowModel(step) with steps corresponding to: group, filter, map, aggregate, sort, pivot.

Client-side Row Model has stages in the following order:

  • Group => Filter => Pivot => Aggregate => Sort => Map

For example, updating updating node data: link

That means if we call api.refreshClientSideRowModel('filter') , it will also execute pivot, aggregate, sort and map.

Full CRUD & Bulk Updating

If we want to add, remove or update multiple rows at once, we have the following options:

  • Method 1 – Row Data (Normal) Change all row data in the Grid by calling api.setRowData(newData) or binding new data to the row data property (in the case of using Angular or React enabling the data binding mechanism). This is the default method, Grid will remove all previous data and recreate rowNode .
  • Method 2 – The Transaction Method will pass a transaction object into the Grid containing rows to add, remove and update by calling api.updateRowData(transaction) . The grid will retain all of the current active stages of row data that is impacted. Update by transaction is the best method in case of needing a large number of updates, at this time Grid will only refresh the necessary row of data, this ensures the performance of the system.
  • Method 3 – Delta Row Data This method uses the mechanism of method 2 (transaction) but differs in that it has the property property deltaRowDataMode=true . When deltaRowDataMode is true, the Grid compares the new row data with the current row data and creates a transaction object, then executes changes with mechanisms such as updating transactions, including retaining selections, filters, etc. This .Modod is used in cases where you want to manage data outside the Grid (eg Redux store) and let Grid handle the changes needed so that the data is always the latest.
  • Method 4 – Batch Update This method is used in case you need to update many small updates at the same time but still ensure performance, by calling batchUpdateRowData() .

Next we will go into details about each method.

Bulk Method 1 – Row Data (Normal)

This is the simplest update method. When calling api.setRowData(newData) , Grid will remove all previous selections, filters .. and proceed to overwrite the old data. We should use this method for the purpose of loading the Grid with completely new data. This method only works with Client-side Row Model .

Bulk Method 2 – Transaction

The api.updateRowData(transaction) method will get details of which data items to update and return all impacted rowNode :

  • The grid will create a new row for each item in the transaction.add array.
  • The grid will remove 1 row for each item in the transaction.remove array. If rowNode ID’s is provided via the getRowNodeId() callback, the Grid then passes an array of objects into the keys corresponding to the rowNode ID specified by getRowNodeId and the values ​​match the rows we want to remove. Without ID’s, the Grid will match rows based on another relationship between objects.
  • Grid will update row by row for each item in the transaction.update array, where Grid will call rowNode.setRowData(newData) . Similarly when removing, Grid will use node ID’s if we provide ID’s, otherwise it will use object reference to identify rows.
  • Client-side Row Model supports all api.updateRowData() , Infinite Row Model only supports ‘Add’, Viewport Row Model and Server-side Row Model do not support transaction updates.

For example, updating with transaction: link

Bulk Method 3 – Delta Row Data

If deltaRowDataMode=true , then we call api.setRowData(rowData) Grid will check which items will be added, removed and updated. To do this, the data must always be fixed, ie instead of updating records, we should replace old records with new ones completely.

For deltaRowDataMode work, we must provide ID’s for row nodes using the getRowNodeId() callback. Grid will handle logic delta changes according to the following rules:

  • If the ID of the new item does not match the existing item in the Grid, it will be an add
  • If the ID of the new item matches the existing item in the Grid, it will compare object references. If the object references of these two items are different, it will be an update , and the same will be ignored.
  • If an item in the Grid does not match any item in the new data, then it will be removed

Bulk Method 4 – Batch Transactions

Whenever Grid’s data is updated, Grid will rework all aggregations, sorts and filters. Using batch transactions will speed up the update process, as it will merge the updates into each batch.

When we call batchUpdateRowData() , after about 50ms. The grid will conduct the update along with the other updates provided by calling batchUpdateRowData() .

The default interval between each batch is 50ms, we can change it by changing the batchUpdateWaitMillis property.

Here is an example of how to use updateRowData() and batchUpdateRowData() , one is to execute immediately, the other is to execute after a period of time and use the callback to show the result:

Ex. About using batch transaction: link


The article aims to introduce 2 mechanisms of Accessing and Updating data of Grid. Posts are limited, thank you for taking the time to track. Sources and references:

Share the news now

Source : Viblo