I have used the following example to construct my kendo grid and I want to collapse and expand using a toggle button or link. I researched and I found one example which uses a function(ToggleAllKendoGridDetailRows) to expand and collapse the grid but I am getting errors saying that tbody is undefined. I tried to debug and I notice that var grid = $('#Grid').data('kendoGrid'); grid is also undefined but I see my grid table works fine. can you please help?
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<a href="#" class="toggleDetail" title="Expand all rows" onclick="ToggleAllKendoGridDetailRows('expand');">Toggle</a>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
});
});
function ToggleAllKendoGridDetailRows(direction) {
//Get a collection of all rows in the grid
var grid = $('#Grid').data('kendoGrid');
var allMasterRows = grid.tbody.find('>tr.k-master-row');
//Loop through each row and collapse or expand the row depending on set deriction
if (direction == 'collapse') {
$(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('expand')");
$(".toggleDetail").text("Expand all rows");
for (var i = 0; i < allMasterRows.length; i++) {
grid.collapseRow(allMasterRows.eq(i));
}
} else if (direction == 'expand') {
$(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
$(".toggleDetail").text("Collapse all rows");
for (var i = 0; i < allMasterRows.length; i++) {
grid.expandRow(allMasterRows.eq(i));
}
}
}
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<a href="#" class="toggleDetail" title="Expand all rows" onclick="ToggleAllKendoGridDetailRows('expand');">Toggle</a>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
});
});
function ToggleAllKendoGridDetailRows(direction) {
//Get a collection of all rows in the grid
var grid = $('#Grid').data('kendoGrid');
var allMasterRows = grid.tbody.find('>tr.k-master-row');
//Loop through each row and collapse or expand the row depending on set deriction
if (direction == 'collapse') {
$(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('expand')");
$(".toggleDetail").text("Expand all rows");
for (var i = 0; i < allMasterRows.length; i++) {
grid.collapseRow(allMasterRows.eq(i));
}
} else if (direction == 'expand') {
$(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
$(".toggleDetail").text("Collapse all rows");
for (var i = 0; i < allMasterRows.length; i++) {
grid.expandRow(allMasterRows.eq(i));
}
}
}
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
0
Hi Taffere,
The ID of the current Grid is grid (lowercase). This is the reason why the Grid instance is not retrieved correctly.
E.g.
Regards,
Dimiter Madjarov
Telerik
The ID of the current Grid is grid (lowercase). This is the reason why the Grid instance is not retrieved correctly.
E.g.
var grid = $('#grid').data('kendoGrid');Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!