Vue Data GridSSRM - Single Row Updates

This section demonstrates updating rows directly while using the Server-Side Row Model (SSRM).

Updating Rows API Copy

You can update a single row by using the row node updateData or setData functions.

Updating Rows Example Copy

The example below demonstrates a basic example, using the API's forEachNode function to iterate over all loaded nodes, and updating their version.

• Set Data: Sets the row data using setData and the grid refreshes the row, notably the cells won't flash with enableCellChangeFlash.

• Update Data: Updates the row data using updateData and the grid refreshes the row, notably the cells do flash with enableCellChangeFlash.

Specific Row Updates Copy

The following code snippet outlines the general approach of iterating through all loaded row nodes and then updating target rows with rowNode.updateData(data):

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

        // directly update data in rowNode
        rowNode.updateData(updated);
    }
});

The example below demonstrates this snippet in action;

Selected Row Updates Copy

The example below demonstrates how to update all of the rows which the user has selected, note the following:

• The Update Selected Rows button will update the row version directly on the selected row nodes.
• The selected nodes are obtained using the api.getSelectedNodes() api, and are then individually updated.

Next Up Copy

Continue to the next section to learn how to use Transactions with the SSRM.