MultiRow

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.multirow.min.js"></script>
<div class="container">
  <h1>MultiRow</h1>
  <div id="multirow"></div>    
</div>

JavaScript

// create some data
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 }
];
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: randBetween(10000, 500000) / 100,
        customer: customers[randBetween(0, customers.length -...