jquery - 默认情况下，如何使分组的 Kendo Grid 可折叠？

Question

这是我到目前为止所拥有的：

 $(reportTableSelector).kendoGrid({
    dataSource: dataSource,
    sortable: false,
    pageable: false,
    scrollable: false,
    columns: colModel
});

var grid = $(reportTableSelector).data("kendoGrid");
grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));
$('tr[role*="row"]').hide();

如果我将最后三行代码放在一个click处理函数中，它将有效地折叠所有分组的行，但在初始化grid.

Answer 1

一种更惯用的方法

var collapseAllGroups = function (grid) {
    grid.table.find(".k-grouping-row").each(function () {
        grid.collapseGroup(this);
    });
}

//On the grid
dataBound: function (e) {
    collapseAllGroups(this);
}

Answer 2

当未应用分组或删除默认分组时，所选答案将导致行消失。

最好使用：

dataBound: function () {
    $(reportTableSelector).find('.k-icon.k-i-collapse').trigger('click');
}

如此处所示：http: //jsfiddle.net/valchev/T64Kb/

（取自http: //www.kendoui.c​​om/forums/kendo-ui-web/grid/grid-collapse-exand-all-groups.aspx ）

注意：我无法让 '.k-icon.k-collapse' 在 Kendo.2013.2.716 中工作，但 '.k-icon.ki-collapse' 确实有效。

Answer 3

这是因为在初始化期间仍然没有收到数据（您可能正在使用远程数据），因此没有渲染。

您可以做collapseGroup的是在接收并绑定数据后调用：

$(reportTableSelector).kendoGrid({
    dataSource: dataSource,
    sortable: false,
    pageable: false,
    scrollable: false,
    columns: colModel,
    dataBound: function () {
        var grid = $(reportTableSelector).data("kendoGrid");
        grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));
        $('tr[role*="row"]').hide();
    }
});

Answer 4

dataBound: function (e) {
        var grid = this;
        $(".k-grouping-row").each(function (e) {
            grid.collapseGroup(this);
        });
    },