angularjs - Angular UI Grid Bug- Agg:remove is not working

Question

In Ui-Grid table I am using aggregate function ,but on agg:remove getting error in console.After agg:remove not able to apply aggregate function on other column.

check this image for error TypeError: aggregation.col.treeAggregationFn is not a function

  var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]);

    app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants ) {
      $scope.gridOptions = {
        enableFiltering: true,
        treeRowHeaderAlwaysVisible: false,
        columnDefs: [
          { name: 'name', width: '30%' },
          { name: 'gender', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' }, width: '20%', cellFilter: 'mapGender' },
          { name: 'age', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, width: '20%' },
          { name: 'company', width: '25%' },
          { name: 'registered', width: '40%', cellFilter: 'date', type: 'date' },
          { name: 'state', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }, width: '35%', cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>' },
          { name: 'balance',cellTemplate:'<a>Balance</a>', width: '25%', cellFilter: 'currency', treeAggregationType: uiGridGroupingConstants.aggregation.AVG, customTreeAggregationFinalizerFn: function( aggregation ) {
            aggregation.rendered = '';
          } }
        ],
        onRegisterApi: function( gridApi ) {
          $scope.gridApi = gridApi;
        }
      };

      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
        .success(function(data) {
          for ( var i = 0; i < data.length; i++ ){
            var registeredDate = new Date( data[i].registered );
            data[i].state = data[i].address.state;
            data[i].gender = data[i].gender === 'male' ? 1: 2;
            data[i].balance = Number( data[i].balance.slice(1).replace(/,/,'') );
            data[i].registered = new Date( registeredDate.getFullYear(), registeredDate.getMonth(), 1 )
          }
          delete data[2].age;
          $scope.gridOptions.data = data;
        });

      $scope.expandAll = function(){
        $scope.gridApi.treeBase.expandAllRows();
      };

      $scope.toggleRow = function( rowNum ){
        $scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
      };

      $scope.changeGrouping = function() {
        $scope.gridApi.grouping.clearGrouping();
        $scope.gridApi.grouping.groupColumn('age');
        $scope.gridApi.grouping.aggregateColumn('state', uiGridGroupingConstants.aggregation.COUNT);
      };

      $scope.getAggregates = function() {
        var aggregatesTree = [];
        var gender

        var recursiveExtract = function( treeChildren ) {
          return treeChildren.map( function( node ) {
            var newNode = {};
            angular.forEach(node.row.entity, function( attributeCol ) {
              if( typeof(attributeCol.groupVal) !== 'undefined' ) {
                newNode.groupVal = attributeCol.groupVal;
                newNode.aggVal = attributeCol.value;
              }
            });
            newNode.otherAggregations = node.aggregations.map( function( aggregation ) {
              return { colName: aggregation.col.name, value: aggregation.value, type: aggregation.type };
            });
            if( node.children ) {
              newNode.children = recursiveExtract( node.children );
            }
            return newNode;
          });
        }

        aggregatesTree = recursiveExtract( $scope.gridApi.grid.treeBase.tree );

        console.log(aggregatesTree);
      };
    }])
    .filter('mapGender', function() {
      var genderHash = {
        1: 'male',
        2: 'female'
      };

      return function(input) {
        var result;
        var match;
        if (!input){
          return '';
        } else if (result = genderHash[input]) {
          return result;
        } else if ( ( match = input.match(/(.+)( \(\d+\))/) ) && ( result = genderHash[match[1]] ) ) {
          return result + match[2];
        } else {
          return input;
        }
      };
    });

Here is plunkr
https://plnkr.co/edit/lTkddSNhfLPHQfuldWfs?p=preview

Answer 1

This seems to be a bug of ui-grid.

To workaround it until it's fixed I recommend to nullify footer aggregation manually on a column that is being ungrouped. Use following code to do so:

column.treeFooterAggregation = undefined;
column.aggregationType = undefined;
column.aggregationValue = undefined;

Answer 2

I'm using ui-grid - v4.4.5 - 2018-03-31, and I had the same problem of "TypeError: aggregation.col.treeAggregationFn is not a function":

My context: I enable the user to store the grid customization in a var :

var mygridCustomization0 = JSON.parse(JSON.stringify(gridApi.saveState.save()));

And I can restore it later by:

gridApi.saveState.restore( lscope, JSON.parse(JSON.stringify(mygridCustomization0 )) );

==> It doesn't run well when there is a grouping!

I try to resolve this problem by adding a call to gridApi.grouping.clearGrouping(); before the restore() call, but i had the same exception...

My solution : i call this code before the restore() (replacing the clearGrouping()!) :

    gridApi.grid.columns.forEach( function(column, columnIndex){

        column.grouping = undefined;
        column.treeFooterAggregation = undefined;
        column.treeAggregation = undefined;
        column.aggregationType = undefined;
        column.aggregationValue = undefined;
    });