Get the Value from Selected Cell in Kendo Grid

From this code snippet you will learn how to get the value from the selected cell in the kendo Grid.

Here is the Html code to get the value from selected cell in kendo Grid:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: true,
change: onChange,
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
]
});
function onChange(e){
e.preventDefault();
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
alert("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
})
</script>
</body>
</html>