Dynamically Add Hierarchical Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I dynamically add hierarchy levels to the Grid?

Solution

1. Use the setOptions method of the Grid.
2. In the setOptions properties, add the detailTemplate configuration and the detailInit event.

EditPreviewOpen In Dojo

<div id="example">
    <button id="button">Create Hierarchy</button>
    <div id="grid"></div>

    <script type="text/x-kendo-template" id="template">
        <div class="orders"></div>
    </script>

    <script>
        $(document).ready(function() {
            var element = $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverSorting: true
                },
                height: 550,
                sortable: true,
                pageable: false,
                columns: [{
                        field: "FirstName",
                        title: "First Name",
                        width: "120px"
                    },
                    {
                        field: "LastName",
                        title: "Last Name",
                        width: "120px"
                    },
                    {
                        field: "Country",
                        width: "120px"
                    },
                    {
                        field: "City",
                        width: "120px"
                    },
                    {
                        field: "Title"
                    }
                ]
            });

            $("#button").kendoButton({
                click: function(e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.setOptions({
                        detailTemplate: kendo.template($("#template").html()),
                        detailInit: detailInit
                    })
                }
            });

        });

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

            detailRow.find(".orders").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 7,
                    filter: {
                        field: "EmployeeID",
                        operator: "eq",
                        value: e.data.EmployeeID
                    }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [{
                        field: "OrderID",
                        title: "ID",
                        width: "70px"
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: "110px"
                    },
                    {
                        field: "ShipAddress",
                        title: "Ship Address"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name",
                        width: "300px"
                    }
                ]
            });
        }
    </script>
    <style>
        .k-detail-cell .k-tabstrip .k-content {
            padding: 0.2em;
        }

        .employee-details ul {
            list-style: none;
            font-style: italic;
            margin: 15px;
            padding: 0;
        }

        .employee-details ul li {
            margin: 0;
            line-height: 1.7em;
        }

        .employee-details label {
            display: inline-block;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            font-style: normal;
            font-weight: bold;
        }
    </style>
</div>