Hide empty group in Ag-grid after row update

Question

How to remove empty groups from ag-grid after updateRowData. In the plnkr example, I am modifying country value for the row, I expect group name to be changed but instead a new group is created.

Code for modifying country name:

let toBeUpdate = [];

this.gridApi.forEachNode((rowNode, index) => {
  if(rowNode.data && rowNode.data.athlete == 'Sadiq Khoja'){

    var data = rowNode.data;
    data.country = 'AAA Unknown X';
    toBeUpdate.push(data);
  }
});

this.gridApi.updateRowData({update:toBeUpdate});

https://plnkr.co/edit/PTuwR5zejS2xiLIg

(Press 'Add' button to change the country name)

Answer 1

UpdateRowData works when there is no row group. In this case, instead of using updateRowData try using setRowData - this.gridApi.setRowData(toBeUpdate);

This will also refresh the grid to reflect the changes in the row.

For more information you can read here - https://www.ag-grid.com/documentation/javascript/data-update/

Answer 2

The correct way to update your data would be to use the setDataValue on rowNode (see here).

Once you update your data, you need to refresh your view for grouping via the api by calling refreshClientSideRowModel.

So your update funciton should be as follows:

this.gridApi.forEachNode((rowNode, index) => {
  if(rowNode.data && rowNode.data.athlete == 'Sadiq Khoja'){
    rowNode.setDataValue('country', 'AAA Unknown X');
  }
});

this.gridApi.refreshClientSideRowModel('group');

Demo