Wijmo3 - Basic Grid Sample

by Ross Dederer

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.48.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.48.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.48.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/metro-dark/jquery-wijmo.css">
<body>
    <table id="wijgrid"></table>
    <input type="button" value="Add New Value" id="add" />
    <input type="button" value="Set Focus" id="focus" />
</body>

JavaScript

$(document).ready(function () {
    var data = [
        [27, 'Canada', 'Adams, Craig', 'RW'],
        [43, 'Canada', 'Boucher, Philippe', 'D'],
        [24, 'Canada', 'Cooke, Matt', 'LW'],
        [87, 'Canada', 'Crosby, Sidney (C)', 'C'],
        [1, 'United States', 'Curry, John', 'G'], ];
    $("#wijgrid").wijgrid({
        allowSorting: true,
        allowPaging: true,
        pageSize: 6,
        data: data
    });
    // Button Event to add a new Row 
    $("#add").button().click(function () {
        // Push new data into the end of the Array named Data
        data.push([27, "USA", "Ross", "D"]);
        // To load the Updated Data model from the linked Data Source. 
        $("#wijgrid").wijgrid("ensureControl", true);
        // Re-render the grid control 
        $("#wijgrid").wijgrid("doRefresh");
        // Set Focus 

    });
    $("#focus").button().click(function () {
        $("#wijgrid").find('.wijmo-wijgrid-innercell').focus();
        alert("done");
    });

});