ng-grid – Dynamically Setting Group by One or More Fields

June 17, 2014

one comment

in one of LogoUi’s projects we had a requirement for dynamically grouping data,  trying to dynamically group data using the group property , is ignored, so after examining the ng-grid internal code, i found a solution.

Setting group by one field

for grouping by one field, in grid options object you need to call the groupBy function and pass the field as a string argument .

Example:

html:

<div ng-controller="MyCtrl">
<button type="button" ng-click="changeGroupBy('name')">Group By Name</button>
<button type="button" ng-click="changeGroupBy('age')">Group By Age</button>
<div class="gridStyle"  ng-grid="gridOptions"></div>
</div>

JavaScript:

app.controller('MyCtrl', function($scope) {

    $scope.myData = [{"name": "Moroni", "age": 50},
              {"name": "Tiancum", "age": 53},
              {"name": "Jacob", "age": 27},
              {"name": "Nephi", "age": 54},
              {"name": "Alex", "age": 53},
              {"name": "Jhonny", "age": 22},
              {"name": "Ben", "age": 11},
              ],

    $scope.gridOptions = { 
        data: 'myData'
        };

    $scope.changeGroupBy = function (group) {
     $scope.gridOptions.groupBy(group);
   }
});

Live Example:

Setting group by array of fields

Grouping by array of fields, it’s a little bit tricky, internally ng-grid has the following function:

// method for user to set the groups programatically
options.groupBy = function (field) {
    if (field) {
        $scope.groupBy($scope.columns.filter(function(c) {
            return c.field === field;
        })[0]);
    } else {
        var arr = $.extend(true, [], $scope.configGroups);
        angular.forEach(arr, $scope.groupBy);
    }
};

as you can see, ng-grid has a little bug, because when trying to pass an array of field names, there is no check for field value to be an array and as a result the first condition executes and we get the following error: TypeError: Cannot read property ‘groupable’ of undefined.

so in order to get our code working (without changing ng-grid internally), we need to add our field names to $scope.configGroups array, then pass an empty/null/undefined argument so the second condition could kick in, start iterating each item in the $scope.configGroups array and start grouping it.

Example:

$scope.changeGroupBy = function (group1,group2) {
  $scope.gridOptions.$gridScope.configGroups=[];
  $scope.gridOptions.$gridScope.configGroups.push(group1);
  $scope.gridOptions.$gridScope.configGroups.push(group2);
  $scope.gridOptions.groupBy();
}

Live Example:

* For clearing grouping, empty the $scope.configGroups array and call the groupBy method by passing an empty/null/undefined argument .

Example:

   $scope.clearGroupBy=function(){
       $scope.gridOptions.$gridScope.configGroups=[];
       $scope.gridOptions.groupBy();
    }

Hope you’ll find this post helpful.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

one comment

  1. Kishore BabuDecember 22, 2014 ב 15:02

    Hi ALex, Nice post. Could you please show the example to get group sum too?

    Reply