ag-grid column row grouping on dropdown selection

Question

I am using ag-grid library in my angular 7 project for creating grid and it has one property in its <ag-grid-angular [rowGroupPanelShow]="rowGroupPanelShow"></ag-grid-angular> selector which is rowGroupPanelShow as mentioned above.

By using this property ag-grid enable drag and drop option for the user and by just dragging and dropping any column ag-grid groups all the rows by that particular column.

But I don't want to drag and drop the column each time I use to group my rows with that particular column. I want to perform all this stuff by using a simple dropdown where dropdown will contain values similar to that of columns in the grid and when user will select any value from dropdown, the ag-grid should group all rows matching with that selected value in ag-grid columns.

I am struggling with issue from last 10 hours. I have searched a lot in ag-grid official site as well. But I didn't got any solution of my issue.

The approach that I am following right now can be seen in the image attached with this post.

Answer 1

I suppose you missed the grid-column-API documentation

Methods for management of column row groups: getRowGroupColumns() , addRowGroupColumn(colKey) , addRowGroupColumns(colKeys) , removeRowGroupColumn(colKey) , removeRowGroupColumns(colKeys) , setRowGroupColumns(colKeys) , moveRowGroupColumn(fromIndex, toIndex)

So to achieve drop-down scenario you have to take care to add and remove grouping on drop-down changes. (*might be not, but let's do it like that)

<select (change)="onChange($event.target.value)">
    <option value="null">Select group</option>
    <option value="year">Year</option>
    <option value="country">Country</option>
</select>

onChange(value){
  this.gridColumnApi.getRowGroupColumns().forEach(i=>{
    this.gridColumnApi.removeRowGroupColumn(i.colId);
  })
  this.gridColumnApi.addRowGroupColumn(value);
}

Demo