How to use grouping and aggregates on Slick Grid

Question

I'm trying to understand how grouping and aggregates work with the slick grid. I have some data that I want to group in a tree like structure somewhat how it's done on this examples page:

http://mleibman.github.io/SlickGrid/examples/example-grouping

However, I can't find any documentation on setGrouping or on what exactly aggregates are. This page doesn't have any documentation, just code, no useful comments on what the code is for or how it's used.

Does anyone know a good resource for this? Google isn't giving me much info either.

For instance, in this code:

dataView.setGrouping({
getter: "duration",
formatter: function (g) {
  return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
},
aggregators: [
  new Slick.Data.Aggregators.Avg("percentComplete"),
  new Slick.Data.Aggregators.Sum("cost")
],
aggregateCollapsed: false
});

I get what the getter and formatter are used for, but what are the aggregators used for? Is this what actually groups them together in the tree view? I don't see where percentComplete and cost come into play because it's grouping by duration.

Answer 1

Let me try answering you in a way you'll understand, first of all a definition... An aggregate is a collection of items that are gathered together to form a total quantity. The total in question could be a sum of all the fields, an average or other type of aggregator you might define. So basically it's the action of regrouping by the column you chose and give the calculation result of the group. Alright now how does it work in the case of a SlickGrid? You need to define what kind of Aggregator you want to use (Avg, Sum, etc...), defining them will do the calculation BUT unless you attach it to the field, nothing will be displayed, so in the example you found it is very important to attach/bind this groupTotalsFormatter: sumTotalsFormatter to your columns definition, as for example:

..., {id: "cost", name: "Cost", field: "cost", width: 90, sortable: true, groupTotalsFormatter: sumTotalsFormatter}, ...

so let's recap... Once the Aggregator is define new Slick.Data.Aggregators.Sum("cost") it will do the calculation but unless it's bind to the field nothing will be displayed. As an extra option, the aggregateCollapsed (true/false) is to display the sub-total (avg, sum or whatever) inside or outside the group when you collapse.