AG-Grid: updateRowData({update: ItemsArray}) affecting all rows instead of selected rows

Question

I'm using Ag-Grid and Angular for this project, and what I'm trying to do is set up shortcut keys to change the 'Status' value of selected rows by pressing associated keys('1'= 'status complete', etc.). There is a built in function called onCellKeyPress() that listens for keystrokes after a row, or rows, has been selected. That's working great, I have a switch case that sends off a value depending on which key is pressed like so:

  onCellKeyPress = (e: any) => {
    switch(e.event.key) {
      case '0': this.rowUpdates('New'); break;
      case '1': this.rowUpdates('Completed'); break;
      case '2': this.rowUpdates('Needs Attention'); break;
      case '3': this.rowUpdates('Rejected'); break;
    }
  }

It sends a string to my custom function rowUpdates(), that takes the value, goes though the existing Nodes, looks for any that are selected, sets the value on those selected, and pushes them to an array.

Now here's where the trouble starts. updateRowData takes 2 params, first is the type of updating it's doing(add, remove, update), in my case I'm using the latter, and an array of rows to change.

  rowUpdates = (value: String) => {
    let itemsToUpdate = [];
    this.gridOptions.api.forEachNode(rowNode => {
      if(rowNode.isSelected() === true) {
        const selected = rowNode.data;
        selected.status.name = value;
        itemsToUpdate.push(selected);
        console.log(itemsToUpdate);
      }
    });
    this.gridOptions.api.updateRowData({update: itemsToUpdate});
  }

However when I press a key to change the row value it updates every row in my grid. What's extra strange is that I have a method that adds a class to the row depending on the 'Status' value, and only the rows I intended to change receive that class.

I'm stumped. I've console.logged everything in this function and they all return with their intended values. The array always contains the nodes that have been selected and the return value of updateRowData is always that same array. I've tried switching out 'forEachNode' with getSelectedNodes and getSelectedRows to no avail. Any ideas?

Check that you are using client-side row model, because the other models (such as server-side or infinite row) don't support transaction updates. Also print the data returned by the call to updateRowData. This may help. — Chris
The docs are telling me that client-side row model is the default setting, and I haven't explicitly changed it. I tried adding a print function as per the example in the Updating Data Feature section, but to no avail. Thanks for the ideas though! — Tasha Zuniga
Note that the doc (ag-grid.com/javascript-grid-data-update/#updating-rows) states "Behind the scenes, the grid will call rowNode.setRowData(newData)". But setRowData updates the whole grid. This is confusing. — Chris

jayadev jayadev · Accepted Answer · 2020-04-22T22:09:59

Please try this.

updateItems(value: String) {
    var itemsToUpdate = [];
    this.gridApi.forEachNodeAfterFilterAndSort(function(rowNode, index) {
      if (!rowNode.selected) {
        return;
      }
      var data = rowNode.data;
      data.status.name = value;
      itemsToUpdate.push(data);
    });
    var res = this.gridApi.updateRowData({ update: itemsToUpdate });
    this.gridApi.deselectAll();//optional
  }

AG-Grid: updateRowData({update: ItemsArray}) affecting all rows instead of selected rows

1 Answers