JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.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
$(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: true,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });
});
function deleteRecord() {
alert("Hi");
var grid = $("#grid").data("kendoGrid");
alert(grid.select().index())
}