Related Grids

Master/Details

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="mastergrid"></div>

<div id="parentgrid"></div>

JavaScript

var element = $("#mastergrid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
        },
        pageSize: 6,
        serverPaging: true,
        serverSorting: true,
        schema: {
            model: {
                id: "EmployeeID"
            }
        }            
    },
    height: 450,
    sortable: true,
    pageable: true,
    selectable: true,
    columns: [
        {
        field: "FirstName",
        title: "First Name"},
    {
        field: "LastName",
        title: "Last Name"},
    {
        field: "Country"},
    {
        field: "City"},
    {
        field: "Title"}
    ],
    change: function() {        
       var id = this.select().closest("tr").data("id");
       $("#parentgrid").show().data("kendoGrid")
           .dataSource.filter({
                field: "EmployeeID",
                operator: "eq",
                value: id
            });
    }
});

$("#parentgrid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 6        
    },
    autoBind: false,
    scrollable: false,
    sortable: true,
    pageable: true,
    columns: ["OrderID", "ShipCountry", "ShipAddress", "ShipName"]
}).hide();