Angular ng-grid summary per column when grouping

Question

I learned about how to customizing ng-grid's aggregation when grouping a grid here.
Now - what If I would want a summary per column (value1, value2, value3) shown in the aggregateTemplate when grouping on groupName if my table looks like the below?

col1;value1;value2;value3;groupName
"first";10;20;30;"group 1"
"second";10;20;30;"group 1"
"third";10;20;30;"group 2"
"fourth";10;20;30;"group 3"
"fifth";10;20;30;"group 3"

Of course I could do this one after the other in the aggregateTemplate calculateChildren function, but its important that the columns and its summaries are aligned. So basically what I'm looking for is for the template to generate the same number of "cells" and add a summary per column in that cell.

Here is a sample plunker: http://plnkr.co/edit/f8patmHudM5PSRyEy6gW?p=preview

JohanLarsson JohanLarsson · Accepted Answer · 2014-08-11T16:36:34

I managed to find a solution by writing my own aggregationTemplate. The template now looks like the following:

aggregateTemplate: 
"<div onmouseover='mouseOver()'; style='display: inline-block;' ng-click=\"row.toggleExpand()\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">" +
"    <span style='margin-left: -22px' class=\"ngAggregateText\">" +
"      <div ng-class=col.colIndex() style='display: inline-block' ng-repeat='col in renderedColumns'><span>{{col.index > 1 ? (aggFunc(row,col) | SwedishCurrency) : (col.index == 0 ? '&nbsp;' : row.label)}}</span></div>" +
"     </span>" +
"    <div class=\"{{row.aggClass()}}\"></div>" +
"</div>" +
""

Here is the aggregation function

$scope.aggFunc = function(row, col) {
  var total = 0;
  angular.forEach(row.children, function(cropEntry) {
    total += parseFloat(cropEntry.entity[col.field]);
  });

  return total;    
};

I got the cells aligned using the following ng-repeat (extract from template definition above):

ng-repeat='col in renderedColumns'

Angular ng-grid summary per column when grouping

1 Answers