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>

CSS

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

.highlighted
{
  font-weight: bold;
}

JavaScript

onload = function() {
        //$(function () {

        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 = grid.frozenRows; 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 mergedRowGen = 13;
        var nrows = 50;
        var dataRND = [];
        var rows = [];
        var ncol = 20;
        for (var i = 0; i < nrows; i++)
            rows.push("ROW " + i);
        for (var i = 0; i < rows.length; i++) {

            if (i % mergedRowGen == 0) {
                var rowDataMerged = [];
                for (var j = 0; j < ncol; j++)
                    rowDataMerged[j] = rows[i];
                dataRND.push(rowDataMerged);
            }
            else {
                var rowData = [];
                rowData[0] = rows[i];
                rowData[1] = (Math.random() * 13)%3;
                for (var j = 2; j < ncol; j++)
                    rowData[j] = Math.random() * 5000;
                dataRND.push(rowData);
            }
        }

        //var frozenRows = 3;
        var frozenColumns = 2;
        var merged = 13;
        // create some random data
        var countries =...