Kendo Window
by lhoeppner
HTML
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<div id="grid"></div>
<script id="isCancel-template" type="text/x-kendo-template">
<a class="k-button k-grid-running" style="color:Black;text-align:center;width:85px;" onclick="deleteRecord()">Cancel</a>
</script>
JavaScript
function deleteRecord() {
var grid = $("#grid").data("kendoGrid");
var dataRows = grid.items();
var rowIndex = dataRows.index(grid.select());
console.log(rowIndex);
}
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
data: [{
FirstName: 'Alphy',
LastName: 'LastName',
category: 'A'
}, {
FirstName: 'Betty',
LastName: 'LastName',
category: 'B'
}, {
FirstName: 'Carlos',
LastName: 'LastName',
category: 'C'
}, {
FirstName: 'zebra',
LastName: 'LastName',
category: 'Z'
}, {
FirstName: 'alpha',
LastName: 'LastName',
category: 'A'
}],
group: {
field: "category"
},
schema: {
model: {
fields: {
FirstName: {
type: "string"
},
LastName: {
type: "string"
}
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: "row",
filterable: true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name"
}, {
field: "LastName",
title: "Last Name"
}, {
template: kendo.template($("#isCancel-template").html())
}]
}).data("kendoGrid");
});