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 5,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 () {
	
  // define custom aggregate in enum
  wijmo.Aggregate[99] = "Custom";
	wijmo.Aggregate["Custom"] = 99;
  
  // override aggregate function to support custom aggregate
	var oldAggregate = wijmo.getAggregate;
  wijmo.getAggregate = function(agg, items, binding){

  	switch(agg){
    	case wijmo.Aggregate.Custom: 
      	return customAggregator(items, binding);
			default:
      	return oldAggregate(agg, items, binding);
    }
    return aggValue;
		
  }
  
  function customAggregator(items, binding){
  		var agg = 0;
      items.forEach(item => {
      	if(item[binding] > 5000){
        	agg += item[binding];
        }
      })
  		return agg;
  }

  
  // 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: 'Custom' },
    	{ 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);

}