agGrid: how to disable hiding ungroupable columns after dragging them to the row group panel?

Question

I have an angular application that I am adding an agGrid table to. I configured the table to allow grouping rows as follows:

  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="activeMethods"
    [groupDefaultExpanded]="-1"
    [rowGroupPanelShow]="'always'"
  >
  </ag-grid-angular>

And I set some of the columns to be groupable as follows:

    enableRowGroup: true,
    enablePivot: true,

This shows the row group panel and allows grouping of the columns I drag into it, but the issue is that "non-groupable" columns that I drag into the panel are hidden. I need those columns not to be hidden when dragged there. I know that the suppressDragLeaveHidesColumns parameter disables hiding any column when it's dragged away from the table, but I would want the "groupable" columns to still be hidden when dragged to the group panel. Is what I want to achieve easily doable?

Answer 1

You could keep suppressDragLeaveHidesColumns to prevent the non grouping columns to be hidden when dragged outside the grid, and then leverage the Grid Event columnRowGroupChanged to change the column that is being grouped, to be hidden. You can find the documentation for this here.

In Version 24, this can be easily achieved using the Column API method applyColumnState, documentation on this can be found here

Putting this all together:

  onColumnRowGroupChanged(params) {
    let columnStateParams = [];

    params.columns.forEach(col => {
      columnStateParams.push({ colId: col.getColId(), hide: true });
    });

    params.columnApi.applyColumnState({
      state: columnStateParams,
    });
  }

I've created a Plunker showing this

The Year and Country column can be grouped only, the Athlete and Age columns cannot be grouped.