Kendo Grid Select ID

by JQ Purfect

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(300),
        pageSize: 10,
        schema  : {
            id   : "Id",
            model: {
                fields: {
                    Id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' }
                }
            }
        }
    },
    selectable: true,
    editable  : false,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { template: "<img style='width:16px' src='http://booleanmagic.com/uploads/searchicon.png'", width: 90},
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" }
    ]
}).data("kendoGrid");

$(grid.tbody).on("click", "td", function (e) {
    var row = $(this).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = $("td", row).index(this);
    var item = grid.dataItem(row);
    var id = item.Id;
    alert("row:" + rowIdx + " col:" + colIdx + " id:" + id + "\nitem:" + JSON.stringify(item, null, 4));
});