FlexGrid prototype

Bunch of functions we need

by Carlo

HTML

<script src="https://cdn.wijmo.com/5.20173.409/controls/wijmo.min.js"></script>
<script src="https://cdn.wijmo.com/5.20173.409/controls/wijmo.input.min.js"></script>
<script src="https://cdn.wijmo.com/5.20173.409/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.wijmo.com/5.20173.409/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.wijmo.com/5.20173.409/controls/wijmo.grid.sheet.min.js"></script>
<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">

<h1>
    FlexGrid prototype
</h1>
<p>Bunch of functions we need</p>
<div id="theSheet" style="height: 350px"></div>
<button id="showColumnsLayout">Show columns layout</button>
<button id="showRows">Show all rows</button>
<button id="hideEvenRows">Hide even rows</button>
<button id="frozenRows">Frozen rows</button>
<select id="frozenRowsN">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<button id="refresh">Refresh</button>

CSS

#theSheet
{
  /*height: 300px;*/
  /*max-height: 300px;*/
}

.highlighted
{
  font-weight: bold;
}

div a
{
  /* hide wijmo logo ;P */
  display: none;
}

JavaScript

onload = function() {
        
        var startInv = new Date();

        var refresh = document.getElementById("refresh");
        refresh.onclick = function () {
            startInv = new Date();
            grid.invalidate();
        };

        var showColumnsLayout = document.getElementById("showColumnsLayout");
        showColumnsLayout.onclick = function () {
            var columnLayout = grid.columnLayout;
            alert(columnLayout);
        };

        var hideEvenRows = document.getElementById("hideEvenRows");
        hideEvenRows.onclick = function () {
            for (var i = 3; i < grid.rows.length; i++) {
                if (i % 2 == 0)
                    grid.rows[i].visible = false;
            }
        };

        var showRows = document.getElementById("showRows");
        showRows.onclick = function () {
            for (var i = 0; i < grid.rows.length; i++) {
                grid.rows[i].visible = true;
            }
        };

        var frozenRows = document.getElementById("frozenRows");
        frozenRows.onclick = function () {
            var n = document.getElementById("frozenRowsN").value;
            grid.frozenRows = +n;
        };

        // generate some random data
        var nrows = 500;
        var frozenColumns = 2;
        var merged = 13;
        // create some random data
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
        var products = [
          { id: 0, name: 'Venticinque', unitPrice: 25 },
          { id: 1, name: 'Dodici', unitPrice: 12 },
          { id: 2, name: 'Cinque', unitPrice: 5 }
        ];
        var data = [];
        var dt = new Date();
        for (var i = 0; i < nrows; i++) {
            if (i == merged) {
                data.push({
                    id: "merged",
                    date: "merged",
                    time: "merged",
                    country: "merged",
                    product: "merged",
                    amount: "merged",
           ...