How to show column footer in grouped grid in AngularJS ui-grid?

Question

I'm using AngularJS ui-grid and followed this tutorial to show the column footer of the gird, it worked fine. However, after I added grouping function in the grid, the column footer is disappeared.

From the 105_footer tutorial, I used this to aggregate column values:

aggregationType: uiGridConstants.aggregationTypes.SUM

In the grouping's column definition, I added this to aggregate column values:

treeAggregation: {type: uiGridGroupingConstants.aggregation.SUM}

Answer 1

The problem is that column aggregation isn't aware of grouping, so it is trying to blindly aggregate all the visible rows in the column. This will probably result in the wrong answer.

There are two forms of wrong here:

1. Grouping by default puts labels into the text - so "Max: 30" for example in the age column. Aggregation then cannot aggregate. You can fix this with a customFinalizerFn, as I've done in the plunker below

2. Aggregation just aggregates all visible rows, including the groupHeader rows. So if you had one level of grouping and then expanded all, a SUM aggregation would end up double the real value. If you had two levels of grouping it would be triple.

In short, I think it's probably a bad idea to use column footers and column level aggregation with grouping.

http://plnkr.co/edit/1znbxELDzeNVK3x3G1c2?p=preview

showGridFooter: true,
showColumnFooter: true,

  { name: 'age', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, aggregationType: uiGridConstants.aggregationTypes.avg, width: '20%', customTreeAggregationFinalizerFn: function( aggregation ){ aggregation.rendered = aggregation.value; } },