Select child rows
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="gridMasterInfo"></div>
<div id="gridInductedTasks"></div>
CSS
#gridMasterInfo, #gridInductedTasks {
width : 45%;
height: 100%;
margin: 2%;
float: left;
}
.childcheckbox, .parentcheckbox {
}
JavaScript
// Source Grid
var gridMasterInfo = $("#gridMasterInfo").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
schema: {
model: {
id: "FirstName",
fields: {
FirstName: {
editable: false,
nullable: true
},
Select: {
},
City: {
}
}
}
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 530,
sortable: true,
detailInit: detailInit,
columns: [
{
field: "Select",
title: "Sel",
width: "25px",
template: "<input type='checkbox' class='parentcheckbox' />"
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "City",
width: "110px"
}
]
});
// Child grid of the source grid
function detailInit(e) {
$("<div class='ob-child-grid' />").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: {
},
Select: {
},
ShipCountry: {
}
}
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: {
field: "OrderID", operator: "lt", value: 10251 }
},
scrollable: false,
sortable:...