Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
                
        </head>
<body>
    <div id="grid" 
        data-role="grid"
        data-sortable="true"
        data-pageable="true"
        data-height="450"
        data-detail-init="viewModel.detailInit"
        data-columns='[{"field": "FirstName"}, {"field": "LastName"}, {"field": "Country"}, {"field": "City"}, {"field": "Title"}]'
        data-bind="source: dataSource, events: { dataBound: dataBound }"></div>
    <script>
        var dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true
        });
​
        var viewModel = kendo.observable({
            dataSource: dataSource,
            detailInit: function (e) {
                $("<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:6,
                        filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "OrderID", width: 70 },
                        { field: "ShipCountry", title:"Ship Country", width: 100 },
                        { field: "ShipAddress", title:"Ship Address" },
                        { field: "ShipName", title: "Ship Name", width: 200 }
                    ]
                });
            },
            dataBound: function(e) {
                e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
            }
        });
​
        kendo.bind($(document.body), viewModel);
    </script>
</body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers