Making Angular ng-grid expand only one group

I had an ng-grid set up with a single ‘group’ column set in the gridOptions. I needed to make it so that only a single group is expanded at any time (i.e. when a user clicked to expand a group,the other groups got automatically collapsed) and that the expanded group was automatically scrolled to the Top of the view.

I created a custom aggregateTemplate in my gridoptions and changed the ng-click to call a custom function to collapse all the other groups before expanding the one just clicked:

$scope.gridOptions = {

aggregateTemplate: “<div ng-click=”customExpand(row)” ng-style=”{‘left’: row.offsetleft}” class=”ngAggregate”><span class=”ngAggregateText”>{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span><div class=”{{row.aggClass()}}”></div></div>”,
showGroupPanel: false,
groups: [‘groupCol’],….

The customExpand function looks like this:

$scope.customExpand = function (row) {
// first collapse all others
angular.forEach($scope.gridOptions.ngGrid.rowFactory.aggCache, function (aggRow, key) {
if (aggRow.isAggRow && aggRow.collapsed == false) {
// then scroll to row for this group
var rowNum = 0;
angular.forEach($scope.gridOptions.ngGrid.rowFactory.aggCache, function (aggRow, key) {
if (aggRow.label == row.label) {
rowNum = key;
$scope.gridOptions.ngGrid.$viewport.scrollTop(rowNum * $scope.gridOptions.ngGrid.config.rowHeight);
// then expand the row

Now, only a single group is expanded at one time. and the expanded group scrolls to the top of the view.

This entry was posted in angular, ng-grid and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s