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

16,898

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
  }
Share:
16,898

Related videos on Youtube

Tasha Zuniga
Author by

Tasha Zuniga

Updated on June 04, 2022

Comments

  • Tasha Zuniga
    Tasha Zuniga about 2 years

    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?

    • Chris
      Chris about 5 years
      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.
    • Tasha Zuniga
      Tasha Zuniga about 5 years
      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!
    • Chris
      Chris about 5 years
      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.
  • Alexius DIAKOGIANNIS
    Alexius DIAKOGIANNIS about 4 years
    You need to state a question that relates to your code. So please can you be so kind to state the problem that your code refers to?
  • jayadev
    jayadev almost 4 years
    "when I press a key to change the row value it updates every row in my grid" Fix to update the selected row alone.