This recipe demonstrates how to create a Kendo Grid within a grid.
Copy the following code into your new document:
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 11 - Creating a Grid Within a Grid</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function() {
var outerServiceURL = "http://gonautilus.com/kendogen/KENDO.cfc?method=getArtists";
var innerServiceURL = "http://gonautilus.com/kendogen/KENDO.cfc?method=getArt";
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
url: outerServiceURL,
dataType: "JSONP"
}
}
});
$("#myGrid").kendoGrid({
dataSource: myDataSource,
sortable: true,
detailInit: detailInit,
columns: [{ field: "ARTISTID", title: "Artist ID"},
{ field: "FIRSTNAME", title: "First Name"},
{ field: "LASTNAME", title: "Last Name"},
{ field: "EMAIL", title: "Email"},
{ field: "PHONE", title: "Phone Number"}]
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: {
url: innerServiceURL,
dataType: "JSONP" }
},
filter: { field: "ARTISTID", operator: "eq", value: e.data.ARTISTID }
},
scrollable: false,
sortable: false,
columns: [
{ field: "ARTID", title: "Art ID"},
{ field: "ARTNAME", title: "Art Name"},
{ field: "DESCRIPTION", title: "Description"},
{ field: "PRICE", title: "Price", template: '#= kendo.toString(PRICE,"c") #'},
{ field: "LARGEIMAGE", title: "Large Image"},
{ field: "MEDIAID", title: "Media ID"},
{ field: "ISSOLD", title: "Sold"}]
});
}
});
</script>
<div id="myGrid"></div>
</body>
</html>In this recipe, we define the detailInit parameter and pass to it the function that is also called detailInit. The detailInit function we created defines an inner Kendo Grid that binds to the ARTISTID column of the row of the outer Kendo Grid from which the detailInit function is called. We bind the inner grid to the outer grid using the filter parameter and by specifying the name of the column and passing the value of that particular column using e.data.