Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: SSRM Updating Data

It is possible to manage data updates using the Server-Side Row Model (SSRM). The different options for updating are as follows:

If using Infinite Scroll (serverSideInfiniteScroll=true) then Transactions and High Frequency updates are not permitted. The only available option for updating data when using Infinite Scroll is Single Row Updates.

The reason row inserts and removes are not allowed while using Infinite Scroll is that they impact the block boundaries. For example suppose a block of 100 rows is received from the server, and you try to insert 10 rows into the middle of the block - this would result in 10 rows falling off the end of the block as they get pushed out. Similarly, if rows were removed, rows would be missing from the end of the block.

If you do need to insert or remove rows while using Infinite Scroll, then the update needs to be done on the server and then the grid should be refreshed. The example Update & Refresh below demonstrates this.

If not using Infinite Scroll (serverSideInfiniteScroll=false), there are no restrictions, you can use any of the provided ways described here.

Single Row Updates

The following code snippet outlines the general approach, to iterate through all loaded row nodes and then update them directly using rowNode.setData(data):

this.gridApi.forEachNode(rowNode => {
    if (idsToUpdate.indexOf( >= 0) {
        // arbitrarily update some data
        var updated =; += 1;

        // directly update data in rowNode

Setting row data will NOT change the row node ID, so if you are using getRowId() and the data changes such that the ID will be different, the rowNode will not have its ID updated.

The example below shows this in action where the following can be noted:

  • Update Selected Rows - will update the medal count directly on the row nodes and then invoke the mock server with the updated rows.
  • Refresh - will clear all loaded data and force a reload. Notice that the previously updated data will be returned from the server.

Update & Refresh

To add or remove records when using Infinite Scroll, the pattern is to update the original dataset (typically on the server) and then get the grid to refresh.

The example below shows this in action where the following can be noted:

  • The Add Row will add a row before the currently selected row.
  • The Remove Row will remove the currently selected row.
  • All operations are done outside the grid and the grid is then told to refresh.

Next Up

Continue to the next section to learn how to perform Transactions.