Demo - Custom Aggregates

HTML

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

  <h1>
    Custom Aggregates</h1>
    
  <p>
    This sample uses the <b>formatItem</b> event to calculate
    custom aggregates for the 'Sales' column.
    The custom aggregate used here is the sum of all values
    greater than 1,000.</p>
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin:10px 0;
}
.wj-cell.wj-frozen-row {
    border-bottom: none;
}
body {
  margin-bottom: 20px;
}

JavaScript

onload = function () {

  // generate some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
    	id: i,
      country: countries[i % countries.length],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
      overdue: i % 3 == 0
    });
	}

	// create a group to show the grand totals
	var grandTotalsGroup = new wijmo.collections.PropertyGroupDescription('Grand Total', 
  	function(item, propName) {
       return '';
    }
	);  

	// grid with custom aggregates
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
	  columns: [ // column definitions with aggregates
  		{ binding: 'id', header: 'ID', width: 60, isReadOnly: true },
    	{ binding: 'country', header: 'Country' },
    	{ binding: 'sales', header: 'Sales', aggregate: 'Sum' },
    	{ binding: 'expenses', header: 'Expenses', aggregate: 'Sum' },
    	{ binding: 'overdue', header: 'Overdue', aggregate: 'Sum' },
  	],
    itemsSource: new wijmo.collections.CollectionView(data, {
    	groupDescriptions: [
      	grandTotalsGroup,
        'country'
      ]
    })
  });
  
  // start collapsed
	theGrid.collapseGroupsToLevel(1);
  
  // custom aggregate calculation
  theGrid.formatItem.addHandler(function(s, e) {
    if (e.panel == s.cells) {
			var row = s.rows[e.row];
      var col = s.columns[e.col];
			var group = row instanceof wijmo.grid.GroupRow ? row.dataItem : null;
      
      // calculate custom aggregate gropus in the for 'sales' column
      if (group && col.binding == 'sales') {
      	var tot = 0;
        for (var i = 0; i < group.items.length; i++) {
        	var val =group.items[i].sales;
          if (val > 1000) {
	        	tot += group.items[i].sales;
          }
        }
        e.cell.textContent = wijmo.Globalize.format(tot, col.format);
      }
		}
  });
}