<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var uid="";
$("#grid").kendoGrid({
editable: "popup",
columns: [
{ field: "name" },
{ field: "age" }
,
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "Jane Doe", age: 30 },
{ id: 3, name: "Jane Doe", age: 30 },
{ id: 4, name: "Jane Doe", age: 30 },
{ id: 5, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
selectable: "row",
edit: function(e) {
if (!e.model.isNew()) {
console.log("1",e.model.uid);
uid=e.model.uid;
var grid = $("#grid").data("kendoGrid");
grid.select("tr[data-uid='" + uid + "']");
}
},
save: function(e) {
},
dataBound:function(e){
console.log("2",uid);
var grid = $("#grid").data("kendoGrid");
//var uid = grid.dataSource.at(1).uid;
grid.select("tr[data-uid='" + uid + "']");
},
select:function(e){
console.log("test",e);
}
});