Wijmo 5 - Aggregates

by sarunokoshikake

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.39/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.grid.min.js"></script>
<h1>Aggregates</h1>

<p>
    This is a <b>FlexGrid</b> showing aggregate values.
    This is done by binding the grid to a grouped data source and setting the 
    'aggregate' property on one or more columns to one of the built-in values:</p>
<p>
    We also add a custom "grand total" row below the data. This is done using
    the 'lodedRows' event. The grand total data is updated when the source
    collection changes and when the user edits the data.</p>
<div id="theGrid"></div>

CSS

.wj-flexgrid {
    max-height: 400px;
}

/* style the aggregate row */
.wj-flexgrid .wj-cell.wj-group.wj-aggregate-row:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #ffee85;
}
.wj-flexgrid .wj-cell.wj-group.wj-aggregate-row {
    font-weight: bold;
}

JavaScript

onload = function () {

    // create some data
    var countries = 'US,Germany,UK,Japan'.split(','),
        data = [];
    for (var i = 0; i < 20; i++) {
        data.push({
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            active: i % 7 == 0
        });
    }

    // show the data
    var flex = new wijmo.grid.FlexGrid('#theGrid', {
        headersVisibility: 'Column',
        autoGenerateColumns: false,
        itemsSource: data,
        columns: [
            { binding: 'country', header: 'Country', width: 200 },
            { binding: 'downloads', header: 'Downloads', aggregate: 'Sum' }, 
            { binding: 'sales', header: 'Sales', aggregate: 'Sum' }, 
            { binding: 'expenses', header: 'Expenses', aggregate: 'Sum' }, 
            { binding: 'active', header: 'Active', aggregate: 'Sum' }
        ]
    });


    // group the data by country
    flex.collectionView.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));

    //********************************************************************************
    // add an extra 'grand aggregate' row below the data
    
    var aggregateRow = new wijmo.grid.GroupRow();
    aggregateRow.cssClass = 'wj-aggregate-row';

    // append aggregate row to grid now and when the rows are loaded
    flex.rows.push(aggregateRow);
    flex.loadedRows.addHandler(function () {
        flex.rows.push(aggregateRow);
    });

    // update totals now and whenever the data changes
    updateAggregateRow(flex);
    flex.collectionView.collectionChanged.addHandler(updateAggregateRow);
    flex.cellEditEnded.addHandler(updateAggregateRow);

    function updateAggregateRow() {
        if (aggregateRow) {
            for (var i = 0; i < flex.columns.length; i++) {
                var col = flex.columns[i];
                if (col.binding...