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">
<button id="btnEdit">Edit Detail...</button>
<br/>
<!-- this is the grid -->
<div id="gsFlexGrid"></div>

CSS

/* set default grid style */
 .wj-flexgrid {
    height: 500px;
    width: auto;
    margin-bottom: 12px;
}

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < 250; 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);
cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("country"));

// 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);
        }
    }
});

// Add the processes for buttons' click
document.getElementById('btnEdit').addEventListener('click', function () {
    alert("Attempting to add a data element");
    var newItem = cv.addNew();
    newItem.country = "US Canada";
    newItem.date = new Date(2014, 10 % 12, 10 % 28);
    newItem.amount = Math.random() * 10000;
    newItem.active = true;

    cv.commitNew();
    //cv.refresh();
    newItem.moveCurrentToFirst();
    alert(cv.currentPoistion);

});