How to update autoGroupColumnDef property of ag-Grid after table is initialized

Question

I have an ag-grid table (Enterprise version: 22.1.0) which is grouped using autoGroupColumnDef property. The grouping is dependent on the table's data and the data loads on a button click. I need to update the autoGroupColumnDef property's field name (_this.colName in the below code) after the page is loaded, right before loading the data.

Table's grid options:

_this.gridOptions = {
  defaultColDef: {
      sortable: true,
      resizable: true,
      filter: true
  },
  columnDefs: _this.columnDefs,
  rowData: [],
  enableRangeSelection: true,
  autoGroupColumnDef: {
    headerName: "Sector",
    field: _this.colName,
    cellRendererParams: {
      suppressCount: true
    },
    tooltipValueGetter: function(params) {
      return _this.tooltipVal
    }
  },
  suppressAggFuncInHeader: true, 
  enableBrowserTooltips: true
};

I update the variable _this.colName before setting data to the grid. I have tried the following options and none of them worked for me:

1. _this.gridOptions.api.refreshClientSideRowModel('group');
2. _this.gridOptions.api.refreshCells();
3. _this.gridOptions.autoGroupColumnDef.field = 'Column's Name'

Any help would be appreciated!

Answer 1

There is a good workaround for this. You can set autoGroupColumnDef, then remove and readd all row groupings. It will redraw the group column with the new name.

    gridOptions.autoGroupColumnDef.headerName = 'new_name';
    
    // Get current groupings
    var colstate = gridOptions.columnApi.getColumnState();
    var colstateclear = gridOptions.columnApi.getColumnState();

    // Clear groupings
    var x = 0, xcount = colstateclear.length;
    while ( x < xcount ) {
        colstateclear[x].rowGroupIndex = null;
        x += 1;
    }
    gridOptions.columnApi.setColumnState(colstateclear);
    
    // Reset groupings  
    gridOptions.columnApi.setColumnState(colstate);

Answer 2

I contacted ag-grid support and apparently this is a bug and they have it in their backlog with no ETA available for now. A workaround they provided was to use: https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup.

This is not really a good workaround because the grouped columns are separated and makes the page feel cramped. Also there are some look and feel issues that keep popping up (Eg: empty space added before each column that increases with each grouped column. ie second column has 1 cm added before it, third column has 2 cm added before it and so on. I guess this was added to bring the grouped look in the group column but you wouldn't expect this behavior when the columns are separated.)

ag-grid's backlog ID for the ticket: AG-3359 - Allow the autoGroupColumn to be used in the API calls for columns, at the moment there is no way to dynamically change it after creation. (ie, setColumnDefs …)

Link to track the progress: https://www.ag-grid.com/ag-grid-pipeline/

Answer 3

there is a straight forward method to update the autoGroupColumnDef object and its properties with setAutoGroupColumnDef

this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
    ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
    minWidth: 500
  })

if any problems with the spread operator, do it manually:

this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
    // ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
headerName: this.gridOptions.autoGroupColumnDef.headerName,
    minWidth: 500
  })

and one more thing, add this if you have any visual bugs, like: header row gets resized but bellow rows stays the same as previus state, so the refresh of model is required:

this.gridOptions.api.refreshClientSideRowModel();

this refresh is not ideal solution, because it refreshes everything, so you will loose expanded levels for example, still no clue how to preserve all settings. https://angulargrid.com/angular-grid/client-side-model/#refreshing-the-client-side-model

and best solution for now is tu use:

this.gridOptions.api.redrawRows();

it keeps the rows expanded if are, checkbox selected if is.