Kendo

by maxim75

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="grid"></div>

<script type="text/x-kendo-template" id="template">
    <div class="tabstrip">
        <ul>
            <li class="k-state-active">
               Orders
            </li>
            <li>
                Contact Information
            </li>
        </ul>
        <div>
            <div class="orders"></div>
        </div>
        <div>
            <div class='employee-details'>
                <ul>
                    <li><label>Country:</label>#= Country #</li>
                    <li><label>City:</label>#= City #</li>
                    <li><label>Address:</label>#= Address #</li>
                    <li><label>Home Phone:</label>#= HomePhone #</li>
                </ul>
            </div>
        </div>
    </div>

</script>

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-master-row">
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td>Some text</td>
    </tr>
</script>

JavaScript

$(document).ready(function() {
    var element = $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
        },
        height: 450,
        sortable: true,
        pageable: true,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: detailInit,
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"},
        {
            field: "Country"},
        {
            field: "City"},
        {
            field: "Title"}
        ],
        rowTemplate: kendo.template($("#rowTemplate").html())
    });
});

function detailInit(e) {
    var detailRow = e.detailRow;

    detailRow.find(".tabstrip").kendoTabStrip();

    detailRow.find(".orders").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: ["OrderID", "ShipCountry", "ShipAddress", "ShipName"]
    });
}