FlexGrid's columns have an aggregate property that allows you to show data summaries for the whole grid or for each group. If the built-in aggregates are not enough, you can calculate also aggregates with custom code. The grid below includes a 'Profit' column that shows the difference between 'Sales' and 'Expenses'.
The 'Profit' column is calculated in the formatItem event. The profit for regular data items is based on the actual data items. The profit for groups is calculated using the group's getAggregate method.
The 'Profit' column cannot be sorted because it is calculated dynamically, and does not belong to the data items.
Learn about FlexGrid | Custom Aggregates Documentation | FlexGrid API Reference
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = [];
for (var i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
product: products[i % products.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
});
}
//
// create a group to show the grand totals
var grandTotalsGroup = new wjCore.PropertyGroupDescription('Grand Total', function (item, propName) {
return '';
});
//
// grid with custom aggregates
var theGrid = new wjGrid.FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{ binding: 'id', header: 'ID', width: 60, isReadOnly: true },
{ binding: 'country', header: 'Country' },
{ binding: 'product', header: 'Product' },
{ binding: 'sales', header: 'Sales', aggregate: 'Sum' },
{ binding: 'expenses', header: 'Expenses', aggregate: 'Sum' },
{ binding: 'profit', header: 'Profit', dataType: 'Number', isReadOnly: true, allowSorting: false }
],
itemsSource: new wjCore.CollectionView(data, {
groupDescriptions: [
grandTotalsGroup,
'country'
]
})
});
//
// start collapsed
theGrid.collapseGroupsToLevel(1);
//
// custom cell calculation
theGrid.formatItem.addHandler(function (s, e) {
//
// cells and column footer panels only
if (e.panel == s.cells) {
//
// get row, column, and data item (or group description)
var r = s.rows[e.row];
var c = s.columns[e.col];
var item = s.rows[e.row].dataItem;
var group = r instanceof wjGrid.GroupRow ? item : null;
//
// assume value is not negative
var negative = false;
//
// calculate profit
if (c.binding == 'profit') {
var profit = group
? group.getAggregate('Sum', 'sales') - group.getAggregate('Sum', 'expenses')
: item.sales - item.expenses;
e.cell.textContent = wjCore.Globalize.format(profit, c.format);
negative = profit < 0;
}
//
// update 'negative' class on cell
wjCore.toggleClass(e.cell, 'negative', negative);
}
//
});
}
Submit and view feedback for