CODEWITHSUNDEEP
cssangularjsangularjs-directiveangular-ui-grid
Tony
Tony

Reputation: 1445

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

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}

Upvotes: 3

Views: 2799

Answers (2)

Kolappan N
Kolappan N

Reputation: 4011

As PaulL says in his answer the problem arises as column aggregation and grouping are causing problems to one another.

The best idea here would be to remove column aggregation. If you are using grouping such as SUM it will automatically show column aggregation in the footer for the SUM. I could not understand the need to use a separate column aggregation.

You can see this in this Plunker:

{
  name: 'age',
  treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
  width: '20%',
}

Note: You don't even need to use the customTreeAggregationFinalizerFn if you are not using column aggregation. (But you will need it if cell filter is used)

Upvotes: 0

PaulL
PaulL

Reputation: 6650

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; } },

Upvotes: 3

Related Questions