AG-Grid: updateRowData({update: ItemsArray}) affecting all rows instead of selected rows
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
}
Related videos on Youtube
![Tasha Zuniga](https://lh5.googleusercontent.com/-ReBlh0Ew9oE/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3reJ11AETga_ySiY8uvGn-42jRBv_Q/mo/photo.jpg?sz=256)
Tasha Zuniga
Updated on June 04, 2022Comments
-
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
andgetSelectedRows
to no avail. Any ideas?-
Chris about 5 yearsCheck 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 about 5 yearsThe 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 about 5 yearsNote 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 about 4 yearsYou 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 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.