ng-grid tally multiple columns

Question

My data has more fields than my page has columns. I need to sum fields into the columns.

The JSON I have:

{
  'foo1' : 10,
  'foo2' : 11,
  'foo3' : 5,
  'bar1' : 23,
  'bar2' : 2,
  'baz1' : 53,
  'baz2' : 43
},{
  'foo1' : 11,
  'foo2' : 41,
  'foo3' : 31,
  etc.
}

The GRID I want:

Foos Bars Baz's
---- ---- -----
 26   23   96
 83  etc.

So I want to be able to add multiple items before rendering the field, something like this:

columnDefs: [{
  field: 'foo1 + foo2 + foo3',
  displayName: 'Foos' 
},{
  field: 'bar1 + bar2',
  displayName: 'Bars' 
},{
  field: 'baz1 + baz2',
  displayName: 'Baz's' 
}]

or maybe something like

field : 'sumFields([foo1,foo2,foo3])'
...
$scope.sumFields = function(fieldlist){
  return fieldlist.reduce(function(pv, cv) { return pv + cv; }, 0));
};

Of course, none of this pseudo-code works.

And I'd like to avoid writing a custom CellTemplate for every column.

I suppose, worst-case scenario, I could massage the data before rendering... So,

{
  'foo1' : 10,
  'foo2' : 11,
  'foo3' : 5,
  'bar1' : 23,
  'bar2' : 2,
  'baz1' : 53,
  'baz2' : 43,

  'foos': 26,
  'bars': 23,
  'bazs': 96
},{
  'foo1' : 11,
  'foo2' : 41,
  'foo3' : 31,
  etc.
}

[ EDIT ]I've added a sample plunker that contains my unmodified grid, and a depiction of what I want to have:

http://plnkr.co/edit/x5abGuyvunBDes6h60eg?p=preview

I don't want to see cats or dogs or other animals, I want to see a sum of certain types. There are more of these columns than I show, so I'm looking for a more general solution, something like

  numAnimalsByType([arrayOfAnimals])

so I can do this:

field: numAnimalsByType([dog,cat])
field: numAnimalsByType([fish,snail])

Care to post your grid html? Better yet, make a fiddle showing your problem. — Matt Way, Aug 15 '14 at 23:35

score 0 · Answer 1 · answered Aug 16 '14 at 00:16

0

Challenge accepted!

So I just made a minor change in your columnDefs field values:

  $scope.columnDefs = [{
    field: 'it.foo1 + it.foo2 + it.foo3',
    displayName: 'Foos'
  }, {
    field: 'it.bar1 + it.bar2',
    displayName: 'Bars'
  }, {
    field: 'it.baz1 + it.baz2',
    displayName: "Baz's"
  }];

The purpose of the aditional it. is to make it be a formula, so we can eval them:

<table>
  <tr>
    <th ng-repeat="column in columnDefs">{{column.displayName}}</th>
  </tr>
  <tr ng-repeat="it in entries">
    <td ng-repeat="column in columnDefs">{{$eval(column.field)}}</td>
  </tr>
</table>

That's it! Simple and functional, see it working here:

http://plnkr.co/edit/DfRiqH18MpnFPa0jL2X6?p=preview

Hope that helps.

answered Aug 16 '14 at 00:16

Fedaykin

4,482
3
22
32

Thanks. Although I'm using ng-grid, so there's no HTML to modify, it's all generated by the plug-in. I'd have to modify the source code. – DaveC426913 Aug 18 '14 at 13:29
1

In that case, I see no other choice than translating your array to a new one, with all the calculations already done, in a more straightforward array and binding to it. – Fedaykin Aug 18 '14 at 14:21
OK, I'll go with this. Before rendering, I simply make and add the new fields I need. report.landlife = report.cats + report.dogs; field: 'landlife' Maybe someone will come up with a more elegant way. – DaveC426913 Aug 18 '14 at 15:31

ng-grid tally multiple columns

1 Answers1