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.

Screenshots of code are too annoying to work with. Replace them with the text version of your code. Also, you will be more likely to get an answer if you make a demo showing the problem. You can start from this, or any other example in the documentation. — thirtydot
I've looked at your previous questions too. Always provide your code as text in your questions! You can also add screenshots if you think it needed for clarity. — thirtydot

un.spike un.spike · Accepted Answer · 2019-03-05T17:32:33

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

ag-grid column row grouping on dropdown selection

1 Answers