Basic Grid Load

by erick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="grid"></div>
<div>Shift : <span id="shift"></span></div>
<div>Control: <span id="ctrl"></span></div>
<div>Alt: <span id="alt"></span></div>

JavaScript

var myDataSource = new kendo.data.DataSource({
    data: {
        "people": [
            { "firstName":"John" , "lastName":"Doe" },
            { "firstName":"Anna" , "lastName":"Smith" },
            { "firstName":"Peter" , "lastName":"Jones" }
        ]
    },
    schema : {
        data: "people"
    }
});

$("#grid").kendoGrid({
    dataSource: myDataSource,
    columns: [
        {
            field: "firstName",
            title: "First Name"
        },
        {
            field: "lastName",
            title: "Last Name"
        }]
});

$("#grid").on("click", "table", function(e) {
    $("#shift").text(e.shiftKey ? "Pressed" : "");
    $("#ctrl").text(e.ctrlKey ? "Pressed" : "");
    $("#alt").text(e.altKey ? "Pressed" : "");
    
});