Wijmo 5 - Styling Controls

by Joel Parks

HTML

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

  <h1>Styling Wijmo 5 Controls</h1>

  <p>
    This is a <b>FlexGrid</b> control with five items:
  </p>
  <div id="grid5" class="grid"></div>

  <p></p>
  <p>
    This is a <b>FlexGrid</b> control with 10,000 items:
  </p>
  <div id="grid10000" class="grid"></div>

  <p>
    That's it for now...
  </p>

CSS

.grid {
    height: auto;
    max-height: 350px;
}
.grid .wj-header.wj-cell {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    border-right: solid 1px #404040;
    border-bottom: solid 1px #404040;
}
.grid .wj-cell {
    border: none;
    background-color: #fff;
}
.grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}
.grid .wj-cells .wj-state-selected {
    background: #000;
    color: #fff;
}
.grid .wj-cells .wj-state-multi-selected {
    background: #222222;
    color: #fff;
}

JavaScript

onload = function () {

    // generate some random data
    function getData(count) {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (var i = 0; i < count; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }

    // create grids
    var g5 = new wijmo.grid.FlexGrid('#grid5', {
    	itemsSource: getData(5)
    });
    var g10000 = new wijmo.grid.FlexGrid('#grid10000', {
      itemsSource: getData(10000)
    });
}