'Expand detail row of grid

I have a problem expanding the detail row of the kendo grid. My grid is fill with 3 level data like below.

Parent Row
   Child Row 
     Grand Child Row

Each of the row have a grid. What I want to achieve is expand all detail row when clicking on a button to show those grid. Currently, I can expand all detail row but the grid for Grand Child become shrink. If manually expand it doesn't have this problem.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/detailtemplate?autoRun=true&theme=office365">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common-office365.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.office365.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.office365.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <button id="expand" class="btn btn-sm btn-primary" >Expand</button>
    <div id="example">
    <div id="grid"></div>

    
    <script type="text/x-kendo-template" id="template">
        <div class="taskGrid"></div>
    </script>
    <script type="text/x-kendo-template" id="Subtemplate">
        <div class="subTaskGrid"></div>
    </script>
    <script>
        $(document).ready(function() {
          
            var column=[{
        "field": "",
        "title": "No.",
        "hidden": false,
        "template": "",
        "width": "40px",
        "headerTemplate": null,
        "taskColumn": []
    },
    {
        "field": "r_tasker",
        "title": "Admin Name",
        "hidden": false,
        "template": "<span title='#:r_tasker#'>#:r_tasker#</span>",
        "width": "180px",
        "headerTemplate": null,
        "taskColumn": []
    },
    {
        "field": "r_tasker_email",
        "title": "Email",
        "hidden": false,
        "template": "<span title='#:r_tasker_email#'>#:r_tasker_email#</span>",
        "width": "180px",
        "headerTemplate": null,
        "taskColumn": []
    },
    {
        "field": "taskColumn",
        "title": "taskColumn",
        "hidden": true,
        "template": "<span title='#:taskColumn#'>#:taskColumn#</span>",
        "width": "",
        "headerTemplate": null,
        "taskColumn": [{
                "field": "r_task_receive_date",
                "title": "Receive Date",
                "hidden": false,
                "template": "<span title='#:r_task_receive_date#'>#:r_task_receive_date#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_action_date",
                "title": "Action Taken on",
                "hidden": false,
                "template": "<span title='#:r_task_action_date#'>#:r_task_action_date#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_status",
                "title": "Action Taken",
                "hidden": false,
                "template": "<span title='#:r_task_status#'>#:r_task_status#</span>",
                "width": "350px",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_ref_no",
                "title": "ID",
                "hidden": true,
                "template": "<span title='#:r_ref_no#'>#:r_ref_no#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_name",
                "title": "Applicant Name",
                "hidden": true,
                "template": "<span title='#:r_app_name#'>#:r_app_name#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_ic",
                "title": "Passport",
                "hidden": true,
                "template": "<span title='#:r_app_ic#'>#:r_app_ic#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_com_dep",
                "title": "Company / Department",
                "hidden": true,
                "template": "<span title='#:r_app_com_dep#'>#:r_app_com_dep#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_duration",
                "title": "Duration",
                "hidden": false,
                "template": "<span title='#:r_task_duration#'>#:r_task_duration#</span>",
                "width": "",
                "headerTemplate": "<span title=\" The duration is derived by hours from Received Date to Action Taken on.\">Duration(Hours) <i class='k-icon k-i-info'><i></span>",
                "taskColumn": []
            }
        ]
    },
    {
        "field": "firstTaskColumn",
        "title": "firstTaskColumn",
        "hidden": true,
        "template": "<span title='#:firstTaskColumn#'>#:firstTaskColumn#</span>",
        "width": "",
        "headerTemplate": null,
        "taskColumn": [{
                "field": "r_ref_no",
                "title": "ID",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_name",
                "title": "Applicant Name",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_ic",
                "title": "Passport",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_com_dep",
                "title": "Company / Department",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_duration",
                "title": "Total Duration",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": "<span title=\" The total duration is derived by the sum up of all iteration's duration.\">Total Duration(Hours) <i class='k-icon k-i-info'><i></span>",
                "taskColumn": []
            }
        ]
    }
];
          var row=[{
        "r_tasker": "A",
        "r_tasker_email": null,
        "taskColumn": "[{\"r_app_name\":\"AAAA_ CH UPDATE\",\"r_ref_no\":\"O-001\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"1.5\",\"subitem\":[{\"r_task_receive_date\":\"03/03/2021 05:59:21\",\"r_task_action_date\":\"03/03/2021 06:48:26\",\"r_task_status\":\"Approved application.\",\"r_ref_no\":\"O-001\",\"r_app_name\":\"AAAA_ UPDATE\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"1\"},{\"r_task_receive_date\":\"03/03/2021 05:43:20\",\"r_task_action_date\":\"03/03/2021 05:55:59\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-001\",\"r_app_name\":\"AAAA_ CH UPDATE\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"0.5\"}]},{\"r_app_name\":\"a\",\"r_ref_no\":\"O-003\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"10563\",\"subitem\":[{\"r_task_receive_date\":\"23/03/2021 05:21:14\",\"r_task_action_date\":\"25/03/2021 10:40:49\",\"r_task_status\":\"approved application.\",\"r_ref_no\":\"O-003\",\"r_app_name\":\"a\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"53.5\"},{\"r_task_receive_date\":\"10/01/2020 04:02:01\",\"r_task_action_date\":\"23/03/2021 01:25:01\",\"r_task_status\":\"Require  Review on application.\",\"r_ref_no\":\"O-003\",\"r_app_name\":\"a\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"10509.5\"}]}]",
        "firstTaskColumn": null
    },
    {
        "r_tasker": "B",
        "r_tasker_email": null,
        "taskColumn": "[{\"r_app_name\":\"Antonio Juggler\",\"r_ref_no\":\"O-004\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"1\",\"subitem\":[{\"r_task_receive_date\":\"22/02/2021 12:13:03\",\"r_task_action_date\":\"22/02/2021 12:14:15\",\"r_task_status\":\"Approved application.\",\"r_ref_no\":\"O-004\",\"r_app_name\":\"Antonio Juggler\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"0.5\"},{\"r_task_receive_date\":\"22/02/2021 12:09:50\",\"r_task_action_date\":\"22/02/2021 12:11:15\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-004\",\"r_app_name\":\"Antonio Juggler\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"0.5\"}]}]",
        "firstTaskColumn": null
    }
];
            var record=0;
             var fieldDataSource = new kendo.data.DataSource({
                data: row,
                pageSize: 50
            });
            var element = $("#grid").kendoGrid({
                    dataSource: fieldDataSource,
                    scrollable: true,
                    detailTemplate: kendo.template($("#template").html()),
                    detailInit: detailInit,
                    columns: column,
                        dataSource: {
                        data:row,
                    },
                    pageable: {
                        pageSize: 10000,
                        position: "bottom"
                        },
                    dataBound: function (e)
                    {
                        

                        var items = e.sender.items();
                        for (var i = 0; i < items.length; i++)
                        {
                            var row = $(items[i]);
                            var dataItem = e.sender.dataItem(row);
                            // if got extra then check q_spare_3 is equal to 0 or not(folder deleted)
                            if (dataItem.taskColumn == undefined)
                            {
                                row.find(".k-hierarchy-cell").html('');
                                row.find(".k-hierarchy-col").html('');
                                $(".k-hierarchy-col").remove();
                                $(".k-hierarchy-cell").remove();
                            }
                        }
                        this.expandRow(this.tbody.find("tr.k-master-row"));
                    }
                }).data("kendoGrid");
        });

        function detailInit(e) {
            

            var masterColumn = $("#grid").data("kendoGrid").columns;
            var taskColumn = [];
            for (var i = 0; i < masterColumn.length; i++)
            {
                    if (masterColumn[i].field == "firstTaskColumn")
                    {
                        taskColumn = masterColumn[i].taskColumn;
                        break;
                    }
               
            }
            var detailRow = e.detailRow;
            detailRow.find(".taskGrid").kendoGrid({
                dataSource: {
                    data: jQuery.parseJSON(e.data.taskColumn),
                    pageSize: 50,
                },
                detailInit: detailInitGrandChild,
                detailTemplate: kendo.template($("#Subtemplate").html()),
                dataBound: function (e)
                {
                    var items = e.sender.items();
                    for (var i = 0; i < items.length; i++)
                    {
                        var row = $(items[i]);
                        var dataItem = e.sender.dataItem(row);

                        if (dataItem.subitem == undefined)
                        {
                            row.find(".taskGrid .k-hierarchy-cell").html('');
                            row.find(".taskGrid .k-hierarchy-col").html('');
                            $(".taskGrid .k-hierarchy-col").remove();
                            $(".taskGrid .k-hierarchy-cell").remove();
                        }
                    }

                },
                scrollable: true,
                sortable: true,
                pageable: true,
                columns: taskColumn
            });
        }
        
        function detailInitGrandChild(e)
        {

            var masterColumn = $("#grid").data("kendoGrid").columns;
            var taskColumn = [];
            for (var i = 0; i < masterColumn.length; i++)
            {
                if (masterColumn[i].field == "taskColumn")
                {
                    taskColumn = masterColumn[i].taskColumn;
                    break;
                }
            }
            var detailRow = e.detailRow;
            detailRow.find(".subTaskGrid").kendoGrid({
                dataSource: {
                    data: e.data.subitem,
                    pageSize: 50,
                },
                scrollable: false,
                sortable: true,
                pageable: true,                
                columns: taskColumn
            });
        }
       $('#expand').click(function (e)
        {
            var grid = $("#grid").data("kendoGrid");
            $(".k-master-row").each(function (index)
            {
                grid.expandRow(this);
            });
        })
    </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>


    

</body>
</html>
javascriptkendo-uigridkendo-grid


Solution 1:[1]

I don't know why but the difference when you manually expand the grand child row is the colspan. Manually doing it results in a colspan of 5. Using the expandRow, outcome is 3. This is why the the grand child row does not fill the entire width. To fix, I modified the expand click event handler, like so:

$('#expand').click(function (e) {
  var grid = $("#grid").data("kendoGrid");

  grid.element.find(".k-master-row").each(function() {
    var $masterRow = $(this);
    $row = $masterRow.find(".k-hierarchy-cell a.k-i-collapse");
    // only expand rows that are not expanded
    if ($row.length === 0) {
      grid.expandRow($masterRow);
      var $detailCell = $masterRow.next().find(".k-detail-cell:first");
      $detailCell.attr("colspan", "5");
    }
  });
});

Solution 2:[2]

The code is only effective on parent level, to apply it for multiple more levels, We will need to modify this function to acquire a separate Grid on each level.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/detailtemplate?autoRun=true&theme=office365">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common-office365.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.office365.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.office365.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <button id="expand" class="btn btn-sm btn-primary" >Expand</button>
    <div id="example">
    <div id="grid"></div>

    
    <script type="text/x-kendo-template" id="template">
        <div class="taskGrid"></div>
    </script>
    <script type="text/x-kendo-template" id="Subtemplate">
        <div class="subTaskGrid"></div>
    </script>
    <script>
        $(document).ready(function() {
          
            var column=[{
        "field": "",
        "title": "No.",
        "hidden": false,
        "template": "",
        "width": "40px",
        "headerTemplate": null,
        "taskColumn": []
    },
    {
        "field": "r_tasker",
        "title": "Admin Name",
        "hidden": false,
        "template": "<span title='#:r_tasker#'>#:r_tasker#</span>",
        "width": "180px",
        "headerTemplate": null,
        "taskColumn": []
    },
    {
        "field": "r_tasker_email",
        "title": "Email",
        "hidden": false,
        "template": "<span title='#:r_tasker_email#'>#:r_tasker_email#</span>",
        "width": "180px",
        "headerTemplate": null,
        "taskColumn": []
    },
    {
        "field": "taskColumn",
        "title": "taskColumn",
        "hidden": true,
        "template": "<span title='#:taskColumn#'>#:taskColumn#</span>",
        "width": "",
        "headerTemplate": null,
        "taskColumn": [{
                "field": "r_task_receive_date",
                "title": "Receive Date",
                "hidden": false,
                "template": "<span title='#:r_task_receive_date#'>#:r_task_receive_date#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_action_date",
                "title": "Action Taken on",
                "hidden": false,
                "template": "<span title='#:r_task_action_date#'>#:r_task_action_date#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_status",
                "title": "Action Taken",
                "hidden": false,
                "template": "<span title='#:r_task_status#'>#:r_task_status#</span>",
                "width": "350px",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_ref_no",
                "title": "ID",
                "hidden": true,
                "template": "<span title='#:r_ref_no#'>#:r_ref_no#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_name",
                "title": "Applicant Name",
                "hidden": true,
                "template": "<span title='#:r_app_name#'>#:r_app_name#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_ic",
                "title": "Passport",
                "hidden": true,
                "template": "<span title='#:r_app_ic#'>#:r_app_ic#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_com_dep",
                "title": "Company / Department",
                "hidden": true,
                "template": "<span title='#:r_app_com_dep#'>#:r_app_com_dep#</span>",
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_duration",
                "title": "Duration",
                "hidden": false,
                "template": "<span title='#:r_task_duration#'>#:r_task_duration#</span>",
                "width": "",
                "headerTemplate": "<span title=\" The duration is derived by hours from Received Date to Action Taken on.\">Duration(Hours) <i class='k-icon k-i-info'><i></span>",
                "taskColumn": []
            }
        ]
    },
    {
        "field": "firstTaskColumn",
        "title": "firstTaskColumn",
        "hidden": true,
        "template": "<span title='#:firstTaskColumn#'>#:firstTaskColumn#</span>",
        "width": "",
        "headerTemplate": null,
        "taskColumn": [{
                "field": "r_ref_no",
                "title": "ID",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_name",
                "title": "Applicant Name",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_ic",
                "title": "Passport",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_app_com_dep",
                "title": "Company / Department",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": null,
                "taskColumn": []
            },
            {
                "field": "r_task_duration",
                "title": "Total Duration",
                "hidden": false,
                "template": null,
                "width": "",
                "headerTemplate": "<span title=\" The total duration is derived by the sum up of all iteration's duration.\">Total Duration(Hours) <i class='k-icon k-i-info'><i></span>",
                "taskColumn": []
            }
        ]
    }
];
          var row=[{
        "r_tasker": "A",
        "r_tasker_email": null,
        "taskColumn": "[{\"r_app_name\":\"AAAA_ CH UPDATE\",\"r_ref_no\":\"O-001\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"1.5\",\"subitem\":[{\"r_task_receive_date\":\"03/03/2021 05:59:21\",\"r_task_action_date\":\"03/03/2021 06:48:26\",\"r_task_status\":\"Approved application.\",\"r_ref_no\":\"O-001\",\"r_app_name\":\"AAAA_ UPDATE\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"1\"},{\"r_task_receive_date\":\"03/03/2021 05:43:20\",\"r_task_action_date\":\"03/03/2021 05:55:59\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-001\",\"r_app_name\":\"AAAA_ CH UPDATE\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"0.5\"}]},{\"r_app_name\":\"a\",\"r_ref_no\":\"O-003\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"10563\",\"subitem\":[{\"r_task_receive_date\":\"23/03/2021 05:21:14\",\"r_task_action_date\":\"25/03/2021 10:40:49\",\"r_task_status\":\"approved application.\",\"r_ref_no\":\"O-003\",\"r_app_name\":\"a\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"53.5\"},{\"r_task_receive_date\":\"10/01/2020 04:02:01\",\"r_task_action_date\":\"23/03/2021 01:25:01\",\"r_task_status\":\"Require  Review on application.\",\"r_ref_no\":\"O-003\",\"r_app_name\":\"a\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"10509.5\"}]}]",
        "firstTaskColumn": null
    },
    {
        "r_tasker": "B",
        "r_tasker_email": null,
        "taskColumn": "[{\"r_app_name\":\"Antonio Juggler\",\"r_ref_no\":\"O-004\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"1\",\"subitem\":[{\"r_task_receive_date\":\"22/02/2021 12:13:03\",\"r_task_action_date\":\"22/02/2021 12:14:15\",\"r_task_status\":\"Approved application.\",\"r_ref_no\":\"O-004\",\"r_app_name\":\"Antonio Juggler\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"0.5\"},{\"r_task_receive_date\":\"22/02/2021 12:09:50\",\"r_task_action_date\":\"22/02/2021 12:11:15\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-004\",\"r_app_name\":\"Antonio Juggler\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"0.5\"}]}]",
        "firstTaskColumn": null
    }
];
            var record=0;
             var fieldDataSource = new kendo.data.DataSource({
                data: row,
                pageSize: 50
            });
            var element = $("#grid").kendoGrid({
                    dataSource: fieldDataSource,
                    scrollable: true,
                    detailTemplate: kendo.template($("#template").html()),
                    detailInit: detailInit,
                    columns: column,
                        dataSource: {
                        data:row,
                    },
                    pageable: {
                        pageSize: 10000,
                        position: "bottom"
                        },
                    dataBound: function (e)
                    {
                        

                        var items = e.sender.items();
                        for (var i = 0; i < items.length; i++)
                        {
                            var row = $(items[i]);
                            var dataItem = e.sender.dataItem(row);
                            // if got extra then check q_spare_3 is equal to 0 or not(folder deleted)
                            if (dataItem.taskColumn == undefined)
                            {
                                row.find(".k-hierarchy-cell").html('');
                                row.find(".k-hierarchy-col").html('');
                                $(".k-hierarchy-col").remove();
                                $(".k-hierarchy-cell").remove();
                            }
                        }
                        this.expandRow(this.tbody.find("tr.k-master-row"));
                    }
                }).data("kendoGrid");
        });

        function detailInit(e) {
            

            var masterColumn = $("#grid").data("kendoGrid").columns;
            var taskColumn = [];
            for (var i = 0; i < masterColumn.length; i++)
            {
                    if (masterColumn[i].field == "firstTaskColumn")
                    {
                        taskColumn = masterColumn[i].taskColumn;
                        break;
                    }
               
            }
            var detailRow = e.detailRow;
            detailRow.find(".taskGrid").kendoGrid({
                dataSource: {
                    data: jQuery.parseJSON(e.data.taskColumn),
                    pageSize: 50,
                },
                detailInit: detailInitGrandChild,
                detailTemplate: kendo.template($("#Subtemplate").html()),
                dataBound: function (e)
                {
                    var items = e.sender.items();
                    for (var i = 0; i < items.length; i++)
                    {
                        var row = $(items[i]);
                        var dataItem = e.sender.dataItem(row);

                        if (dataItem.subitem == undefined)
                        {
                            row.find(".taskGrid .k-hierarchy-cell").html('');
                            row.find(".taskGrid .k-hierarchy-col").html('');
                            $(".taskGrid .k-hierarchy-col").remove();
                            $(".taskGrid .k-hierarchy-cell").remove();
                        }
                    }

                },
                scrollable: true,
                sortable: true,
                pageable: true,
                columns: taskColumn
            });
        }
        
        function detailInitGrandChild(e)
        {

            var masterColumn = $("#grid").data("kendoGrid").columns;
            var taskColumn = [];
            for (var i = 0; i < masterColumn.length; i++)
            {
                if (masterColumn[i].field == "taskColumn")
                {
                    taskColumn = masterColumn[i].taskColumn;
                    break;
                }
            }
            var detailRow = e.detailRow;
            detailRow.find(".subTaskGrid").kendoGrid({
                dataSource: {
                    data: e.data.subitem,
                    pageSize: 50,
                },
                scrollable: false,
                sortable: true,
                pageable: true,                
                columns: taskColumn
            });
        }
        $('#expand').click(function(e){
            var masterGrid = $("#grid").data("kendoGrid");
            $("#grid").find("tr.k-master-row").each(function (index) {
                masterGrid.expandRow(this);
            });
            setTimeout(function () {
                var detailRows = masterGrid.element.find(".k-detail-row");
                for (var i = 0; i < detailRows.length; i++) {
                    var detailElement = $(detailRows[i]).find(".k-grid");
                    var detailGrid = detailElement.data("kendoGrid");
                    $(detailElement).find("tr.k-master-row").each(function (index) {
                        detailGrid.expandRow(this);
                    });
                }
            }, 100); //2nd level
        })
    </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>


    

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jpllosa
Solution 2

Related Questions

React Router with optional path parameter

How to dynamically update google recaptcha sitekey?

How to dynamically update google recaptcha sitekey?

Remove duplicate in a string - javascript

Remove duplicate in a string - javascript

Searching a string for missing letters of the alphabet in javascript

Searching a string for missing letters of the alphabet in javascript

Searching a string for missing letters of the alphabet in javascript

Find an element in DOM based on an attribute value

Redirecting html page with javascript

Find an element in DOM based on an attribute value

Find an element in DOM based on an attribute value

Redirecting html page with javascript

How to find x and y coordinates of a button while using keyboard navigation?

How to find x and y coordinates of a button while using keyboard navigation?