How to show column column in a grouped grid in AngularJS ui-grid?
I am using AngularJS ui-grid and following this tutorial to show the column footer, it worked great. However, after I added the grouping function in the grid, the column footer disappeared.
From the 105_footer tutorial, I used it to aggregate column values:
aggregationType: uiGridConstants.aggregationTypes.SUM
In the definition of the grouping column, I added this to the aggregate values of the columns:
treeAggregation: {type: uiGridGroupingConstants.aggregation.SUM}
source to share
The problem is that the column aggregation is not aware of the grouping, so it tries to blindly aggregate all visible rows in the column. This will likely lead to the wrong answer.
There can be two forms here:
-
The default grouping puts labels in the text - so "Max: 30", for example, in the age column. The aggregation then cannot aggregate. You can fix this with customFinalizerFn as I did in the plunker below
-
Aggregation only aggregates all visible rows, including the groupHeader rows. So if you had one level of grouping and then expanded the whole, SUM aggregation would end up doubling the real cost. If you had two levels of grouping, that would be triple.
Long story short, I think it's probably a bad idea to use headers and footers and grouped column aggregation.
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; } },
source to share
As PaulL says in his answer, the problem arises because column aggregation and grouping create problems for each other.
A better idea would be to remove the column aggregation. If you are using a grouping like SUM, it will automatically show the column aggregation in the footer for SUM. I couldn't figure out the need to use a separate aggregation column.
You can see it in this Plunker :
{
name: 'age',
treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
width: '20%',
}
Note . You don't even need to use customTreeAggregationFinalizerFn unless you are using column aggregation. (But you will need it if using a cell filter)
source to share