Get Data in Child Grid

by shuja uddin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<a href="#" class="k-button" id="show">Show</a>
<div id="grid"></div>

JavaScript

var childgrid = undefined;

$("#show").on("click", function () {
    var row = childgrid.select();
    var data = childgrid.dataItem(row);
    console.log("row", row);
    console.log("data", data);
});

var element = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
        },
        pageSize: 6,
        serverPaging: true,
        serverSorting: true
    },
    height: 430,
    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 detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 5,
        filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
    },
    scrollable: false,
    sortable: false,
    selectable: 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: "200px" }
            ]
}).data("kendoGrid");
}