Wijmo (PureJS) - MultiRow, Paging, and Grouping

Combining the MultiRow, Paging, and Grouping controls

by Joel Parks

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.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.multirow.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div id="groupMultirow"></div>
<div class="btn-group">
  <button type="button" class="btn" id="firstBtn">
    <span class="glyphicon glyphicon-fast-backward"></span>
  </button>
  <button type="button" class="btn" id="previousBtn" >
    <span class="glyphicon glyphicon-step-backward"></span>
  </button>
  <button type="button" class="btn" id="numBtn" disabled style="width:100px">
  </button>
  <button type="button" class="btn" id="nextBtn" >
    <span class="glyphicon glyphicon-step-forward"></span>
  </button>
  <button type="button" class="btn" id="lastBtn" >
    <span class="glyphicon glyphicon-fast-forward"></span>
  </button>
</div>

JavaScript

var customers = [];
var firstNames = 'Aaron,Paul,John,Mark,Sue,Tom,Bill,Joe,Tony,Brad,Frank,Chris,Pat'.split(',');
var lastNames = 'Smith,Johnson,Richards,Bannon,Wong,Peters,White,Brown,Adams,Jennings'.split(',');
var cities = 'York,Paris,Rome,Cairo,Florence,Sidney,Hamburg,Vancouver'.split(',');
var states = 'SP,RS,RN,SC,CS,RT,BC'.split(',');
for (var i = 0; i < 50; i++) {
    var first = firstNames[randBetween(0, firstNames.length - 1)],
        last = lastNames[randBetween(0, lastNames.length - 1)];
    customers.push({
        id: i,
        name: first + ' ' + last,
        address: randBetween(100, 10000) + ' ' + lastNames[randBetween(0, lastNames.length - 1)] + ' St.',
        city: cities[randBetween(0, cities.length - 1)],
        state: states[randBetween(0, states.length - 1)],
        zip: wijmo.format('{p1:d5}-{p2:d3}', {
            p1: randBetween(10000, 99999),
            p2: randBetween(100, 999)
        }),
        email: first + '.' + last + '@gmail.com',
        phone: wijmo.format('{p1:d3}-{p2:d4}', {
            p1: randBetween(100, 999),
            p2: randBetween(1000, 9999)
        })
    });
}
var cityMap = new wijmo.grid.DataMap(cities);
var shippers = [
    { id: 0, name: 'Speedy Express', email: '[email protected]', phone: '431-3234', express: true },
    { id: 1, name: 'Flash Delivery', email: '[email protected]', phone: '431-6563', express: true },
    { id: 2, name: 'Logitrax', email: '[email protected]', phone: '431-3981', express: false },
    { id: 3, name: 'Acme Inc', email: '[email protected]', phone: '431-3113', express: false }
];

function randBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

var orders = [];
var today = new Date();
for (var i = 0; i < 20; i++) {
    var shipped = wijmo.DateTime.addDays(today, -randBetween(1, 3000));
    orders.push({
        id: i,
        date: wijmo.DateTime.addDays(shipped, -randBetween(1, 5)),
        shippedDate: shipped,
        amount:...