Show specific field for selected row

by OnaBai

HTML

<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<link rel="stylesheet" href="    http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="    http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<script src="    http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.web.min.js"></script>
<button id="show" class="k-button">Show Date</button>
<div id="grid"></div>

CSS

#grid {
    width : 490px;
}

JavaScript

var ds = {
    data    : createRandomData(20),
    pageSize: 5,
    schema  : {
        model: {
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                BirthDate: { type: 'date' }
            }
        }
    }
};

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    selectable: true,
    columns   :
    [
        { field: "FirstName", width: 90 },
        { field: "LastName", width: 200 },
        { field: "BirthDate", width: 200, format : "{0:d}" }
    ]
}).data("kendoGrid");

$("#show").on("click", function() {
    var sel = grid.select();
    if (sel.length) {
        var item = grid.dataItem(sel);
        alert("BirthDate: " + item.BirthDate);
    } else {
        alert("ERROR: You should select a row!!!");
    }
});