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

【问题标题】：How do I make a grouped Kendo Grid collapsible by default?默认情况下，如何使分组的 Kendo Grid 可折叠？
【发布时间】：2013-01-03 22:30:28
【问题描述】：

这是我目前所拥有的：

 $(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 后调用它时不会。

【问题讨论】：

标签： jquery kendo-ui

【解决方案1】：

一种更惯用的方式

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

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

【讨论】：

这似乎导致 PDF 导出仅显示折叠版本。如果您手动折叠所有行，PDF 导出仍将全部显示。

【解决方案2】：

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

最好用：

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

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

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

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

【讨论】：

就像其他答案一样 - 看起来这导致 PDF 导出仅显示折叠版本。如果您手动折叠所有行，PDF 导出仍将全部显示。
附加信息：对于 Kendo.2014 没有 k-i-collapse 类 - 现在我们应该使用 k-minus: $(reportTableSelector).find('.k-icon.k-minus').trigger('click');。

【解决方案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();
    }
});

【讨论】：

很好，我认为这可能与自动绑定数据有关。我会试试这个。谢谢！
运行$('tr[role*="row"]').hide() 也会隐藏列标题行。我假设第一行是标题并使用$('tr[role*="row"]').slice(1).hide()

【解决方案4】：

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

【讨论】：

我建议您在答案中添加一些解释性文字，否则您可能会因为“低质量”而将其删除（即使它可能是正确答案）！