How to expand and collapse Kendo Hierarchy grid

Question

I have used the following example to construct my kendo grid and I want to collapse and expand using a toggle button or link. I researched and I found one example which uses a function(ToggleAllKendoGridDetailRows) to expand and collapse the grid but I am getting errors saying that tbody is undefined. I tried to debug and I notice that var grid = $('#Grid').data('kendoGrid'); grid is also undefined but I see my grid table works fine. can you please help?

The example can be found here http://dojo.telerik.com/IKIN ....

    <div id="example">
        <div id="grid"></div>

      <a href="#" class="toggleDetail" title="Expand all rows" onclick="ToggleAllKendoGridDetailRows('expand');">Toggle</a>

        <script>
            $(document).ready(function() {
                var element = $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
     ....
                        },
                        {
                            field: "Title"
                        }
                    ]
                });
            });

           function ToggleAllKendoGridDetailRows(direction) {
                //Get a collection of all rows in the grid
                var grid = $('#Grid').data('kendoGrid');
                var allMasterRows = grid.tbody.find('>tr.k-master-row');

                //Loop through each row and collapse or expand the row depending on set    deriction
                if (direction == 'collapse') {
                    $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('expand')");
                    $(".toggleDetail").text("Expand all rows");
                    for (var i = 0; i < allMasterRows.length; i++) {
                        grid.collapseRow(allMasterRows.eq(i));
                    }
                } else if (direction == 'expand') {
                    $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
                    $(".toggleDetail").text("Collapse all rows");
                    for (var i = 0; i < allMasterRows.length; i++) {
                        grid.expandRow(allMasterRows.eq(i));
                    }
                }
            }

            function detailInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },

...... }); } .....

Petur Subev Petur Subev · Accepted Answer · 2014-08-05T10:33:07

Your Grid is named with non-capital 'G'. Also you need to prevent the default behavior of the click on the hyperlink.

Updated example here.

How to expand and collapse Kendo Hierarchy grid

1 Answers