如何展开和折叠 Kendo Hierarchy 网格

Question

我使用以下示例构建了我的剑道网格，我想使用切换按钮或链接来折叠和展开。我进行了研究，发现了一个使用函数（ToggleAllKendoGridDetailRows）来展开和折叠网格的示例，但我收到错误消息说 tbody 未定义。我尝试调试，发现 var grid = $('#Grid').data('kendoGrid');网格也未定义，但我看到我的网格表工作正常。你能帮忙吗？

这个例子可以在这里找到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"
                        },

…… }); } .....

Answer 1

您的网格以非大写“G”命名。您还需要防止点击超链接的默认行为。

更新示例here。