Clear grouping in ng-grid with external button

Question

I have a ng-grid with data that is grouped by category, as shown below:

$scope.gridOptions = {
  columnDefs: [
    {field: 'cat', displayName: 'Category'},
    {field: 'name', displayName: 'Name'},
    {field: 'val', displayName: 'Value'}
  ],
  data: 'myData',
  groups: ['cat']
}

I would like to be able to un-group the data in the ng-grid externally with a button. I do not want to display the group panel (via $scope.gridOptions.showGroupPanel: true), which provides an 'X' to clear the grouping.

I have tried executing the following when clicking on the external button without any success:

• $scope.gridOptions.groups = [];
• $scope.gridOptions.groups.length = 0

Any suggestions on how I can clear the grouping? Ultimately I would like to be able to make the grouping toggle on/off with the button; however, clearing the grouping seems like a good first step. Thanks for your help!

Here is a Fiddle

Answer 1

You can add columns to the existing grouped column by a series of group by statements.

gridOptions.groupBy(col1);
gridOptions.groupBy(col2);

You can clear the existing group by

gridOptions.groupBy(null);

Answer 2

There is an undocumented function in the source code for programmatically setting groups. You can simply:

gridOptions.groupBy(columnFieldKey)

Unfortunately, I haven't been able to find a way to group by more than one column at a time, programmatically.