Wijmo 5 - Advanced Grouping

Shows how to: - add an outlineBar to the grid, - selectively hide aggregates, - auto-size rows asynchronously, - customize sorting

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<h1>AutoSizing and Grouping</h1>

<p>
    This is a FlexGrid with an embedded outlineBar.
    Some aggregates were removed using the formatItem event.</p>

<div id="theGrid" style="height:300px"></div>

<p>
    Click here to autosize all rows on the grid.
    The sync button does it all at once, which takes a while (especially in IE).
    The async button does it in batches, so it doesn't freeze the app.</p>

<button id="btnSzSync">AutoSizeRows (sync)</button>
<button id="btnSzAsync">AutoSizeRows (async)</button>

CSS

.wj-flexgrid {
    height: 300px;
}
.wj-flexgrid .wj-group {
    background-color: white;
}
.wj-flexgrid .wj-cell.wj-header {
    white-space: nowrap;
}

JavaScript

onload = function () {

    // define map with keys, descriptions, and weights
    // keys are stored in the data source
    // descriptions are shown on the grid
    // weights are used to sort this field
    var map = [
        { key: 99, desc: 'Never', weight: 1 },
        { key: 2, desc: 'No', weight: 2 },
        { key: 15, desc: 'Prospective', weight: 3 },
        { key: 4, desc: 'Tentative', weight: 4 },
        { key: 78, desc: 'Maybe', weight: 5 },
        { key: 12, desc: 'Sure', weight: 6 },
        { key: 1, desc: 'Yes', weight: 7 },
        { key: 3, desc: 'Firm', weight: 8 },
        { key: 22, desc: 'Absolutely', weight: 9 }
    ];
    var dataMap = new wijmo.grid.DataMap(map, 'key', 'desc');
    
    // create some random data
    var countries = 'United States,Germany Klingsman,UK Rain,Japan Ham Fighters,Italy Defense,Greece Water'.split(','),
        actions =  [99, 2, 15, 4, 78, 12, 1, 3, 22],
        names = 'Leonardo Blue Katana,Michelangelo Orange Nunchaku,Donatello Purple Bo'.split(','),
        sales = [2, .75, 12.5, 14],
        expenses = [1, 2, 3, 4, 5],
        dates = [new Date(1086930000000), new Date(946713600000), new Date(1086843600000)],
        data = [];
    for (var i = 0; i < 1000; i++) {
        data.push({
            id: i + 1,
            country: countries[i % countries.length],
            action: actions[i % actions.length],
            name: names[i % names.length],
            sales: sales[i % sales.length],
            expenses: expenses[i % sales.length],
            startDate: dates[i % dates.length]
        });
    }

    // create CollectionView
    var view = new wijmo.collections.CollectionView(data);
    
    // add groups
    var gd = new wijmo.collections.PropertyGroupDescription('country');
    view.groupDescriptions.push(gd);
    gd = new wijmo.collections.PropertyGroupDescription('action');
    view.groupDescriptions.push(gd);
    
    // use sortConverter to sort actions by weight
    var sortMap = new...