Wijmo 5 - FlexGrid and FlexChart

by Joel Parks

HTML

<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.63/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.input.min.js"></script>
<div id="theGrid"></div>

JavaScript

$(document).ready(function () {

    // create some random data
    var data = [];
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');


    for (var i = 0; i < 10; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            date: new Date(2014, i % 12, i % 28),
            amount: Math.random()*10,
            active: i % 4 === 0
        });
    }

    // create CollectionView on the data (to get events)
    var view = new wijmo.collections.CollectionView(data);

    // initialize the grid
    var grid = new wijmo.grid.FlexGrid('#theGrid', {
        itemsSource: view,
        selectionMode: wijmo.grid.SelectionMode.Row

    });
    grid.itemFormatter = function (panel, r, c, cell) {
        if (panel.cellType === wijmo.grid.CellType.Cell && c == 0) {
            var cellData = panel.getCellData(r, 0);
            console.log(cellData);
            cell.innerHTML = '<b>' + cellData + '</b>'
        }
    }
});