Wijmo5 - Basic Template

by Ross Dederer

HTML

<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.26/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.gauge.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.26/styles/themes/wijmo.theme.modern.min.css">
<!-- this is the grid -->
<div id="gsFlexGrid"></div>

CSS

/* set default grid style */

.wj-flexgrid {

    height: auto;

    width: auto;

    margin-bottom: 12px;

}
}

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < 4; i++) {
    data.push({
        id: i,
        country: countries[i % countries.length],
        date: new Date(2014, i % 12, i % 28),
        amount: Math.random() * 10000,
        active: i % 4 === 0
    });
}

// create the grid and give it some data
var grid = new wijmo.grid.FlexGrid('#gsFlexGrid'),
    cv = new wijmo.collections.CollectionView(data);

// initialize grid
grid.initialize({
    autoGenerateColumns: false,
    columns: [{
        header: 'Country',
        binding: 'country',
        width: '*',
        isContentHtml: true,
        isReadOnly: true
    }, {
        header: 'Date',
        binding: 'date'
    }, {
        header: 'Revenue',
        binding: 'amount',
        format: 'n0'
    }, {
        header: 'Active',
        binding: 'active'
    }, ],
    itemsSource: cv,
    itemFormatter: function (panel, r, c, cell) {

        // validate CellType and if correct column
        if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == 'amount') {

            // get the cell's data
            var cellData = panel.getCellData(r, c);

            // set cell's foreground color
            cell.style.color = getAmountColor(cellData);
            cell.style.background = "green";


        }
    }
});

// get the color used to display an amount
function getAmountColor(amount) {
    return amount < 5000 ? 'red' : amount < 7000 ? 'blue' : 'white';
}