FlexGrid

Group Rows with Sum aggregation on Amount column

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div class="container">

<h1>FlexGrid</h1>
<p>
Group Rows and Aggregation 
</p>
<p>
This demo uses <b>GroupRow</b> to show aggregate Sums of the <b>Amount</b> column in each group. Negative values are formatted in red with parentheses around the value.
</p>
<div ng-app="app" ng-controller="appCtrl">
<wj-flex-grid control="ctx.flex" items-source="ctx.data" item-formatter="itemFormatter" >
        <wj-flex-grid-column binding="id" header="ID"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="country" header="Country"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="date" header="Date"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="percentage" header="Percentage" format="n2" aggregate="Sum"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="active" header="Active"> </wj-flex-grid-column>
    </wj-flex-grid>
    </div>
</div>

JavaScript

var app = angular.module('app', ['wj']);
app.controller('appCtrl', function($scope, $filter) {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 10; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            date: new Date(2014, i % 12, i % 28),
            percentage: (i % 2 == 0) ? Math.random() * 100 : -1 * Math.random() * 100 ,
            active: i % 4 == 0
        });
    }
    var groupDesc = new wijmo.collections.PropertyGroupDescription("country");
    var cv = new wijmo.collections.CollectionView(data);
    cv.groupDescriptions.push(groupDesc);
    $scope.ctx = {
        flex: null,
        data: cv
    };
    
    $scope.itemFormatter = function(panel, r, c, cell) { 
    
      if (panel.cellType == wijmo.grid.CellType.Cell){
        if (c == 3) {
        	// format negative values
          var val = Number($scope.ctx.flex.getCellData(r, c, false));
					if(val < 0){
            val = val * -1; // make number positive
            cell.innerHTML = "( "+ val.toFixed(2)+" % )"; // add parenthesis
            cell.style.color = 'red'; // change color to red
            var rows = $scope.ctx.flex.rows;
            if( rows[r] instanceof wijmo.grid.GroupRow){
              cell.innerHTML = "<b>"+cell.innerHTML+"</b>"; // make text in GroupRows bold
            }
          }
          else{
          	// value is positive
            cell.innerHTML += " %";
          }
        }
      }
    }
});