Disable/Enable Grouping in ui-grid

Question

I have a ui-grid whose first column is:

  columnDefs : [$scope.getGroupIdColumn(),
                $scope.getKlasCodeColumn(),
                $scope.getKlasNummerColumn(),
                $scope.getNaamColumn()
            ]

where getGroupIdColumn is:

    $scope.getGroupIdColumn = function () {
        var result = new Object();
        result["name"] = 'GroupID';
        result["visible"] = false;
        result["type"] = 'number';
        if ($scope.groupingEnabled) {
            console.log("komt toch: " + $scope.speedDial.grouping);
            var grObj = new Object();
            grObj["groupPriority"] = 0;
            result["grouping"] = grObj;
            return result;
        }
        return result;
    }

Other column definitions are also like this.

If groupingEnabled is true, i have grouping. If false, without grouping. Until here, it works as excepted.

BUT

If i redefine that column, or even all the grid-options, it remains same as it is. Thus, if i have a grid with grouping and i redefine all grid options, i have still grid with grouping.

What should be done?

PS: gridApi.core.refresh(), $evalAsync().. are tried and no any improvement.

Ari · Accepted Answer · 2016-09-16 07:47:16Z

2

I just can't believe it was so easy! I'll write my functions which will be easier for people to get started: (also here is the documentation)

Set gridApi in $scope:

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
}

Save your grouping info:

$scope.groupInfo = $scope.gridApi.grouping.getGrouping();

Just define these functions

$scope.groupData = function () {
    if ($scope.groupInfo != undefined) {
        $scope.gridApi.grouping.setGrouping($scope.groupInfo);
    }
    setTimeout(function () {
        $scope.gridApi.treeBase.expandAllRows();
    }, 400);
    $scope.$evalAsync();
}

$scope.ungroupData = function () {
    // if ($scope.groupInfo != undefined) {
        // $scope.groupInfo = $scope.gridApi.grouping.getGrouping();
    // }
    $scope.gridApi.grouping.clearGrouping();
}

edited Sep 16, 2016 at 7:47

Ari

4586 silver badges13 bronze badges

answered Oct 21, 2015 at 14:47

Asqan

4,51912 gold badges63 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andzej Maciusovic · Accepted Answer · 2016-04-08 13:49:57Z

1

For my case I needed to toggle grouping and I tried your answer but it do not work for me so I changed it a bit.

$scope.groupData = function () {
    $scope.gridApi.grouping.groupColumn('columnName');
    $timeout(function(){
      $scope.gridApi.treeBase.expandAllRows();
    }, 300);
}

Working example http://plnkr.co/edit/AtcLSsqqnSaFeLfOEJhc?p=preview

answered Apr 8, 2016 at 13:49

Andzej Maciusovic

4,5161 gold badge32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Disable/Enable Grouping in ui-grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related