Creating a grid within a grid (Advanced)

This recipe demonstrates how to create a Kendo Grid within a grid.

Getting ready

Open 11-gridwithingrid.html in your editor or create a new document.

How to do it...

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="EB9781849699136_3.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>

How it works...

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset