Kendo UI Grid - 分组表头答案

【问题标题】：Kendo UI Grid - Grouping Table HeaderKendo UI Grid - 分组表头
【发布时间】：2017-06-02 08:39:30
【问题描述】：

我想为分组的 Kendo UI Grid 实现 Collapse/Expand all（在 AngularJs 中）的功能并将其添加到 Grid 的标题中。你知道我怎么能把我的功能放在那里（见附件）。谢谢！

Dojo with a normal grid with grouping activated

【问题讨论】：

标签： javascript angularjs kendo-ui kendo-grid

【解决方案1】：

您可以在k-group-cell k-header 元素上动态创建button 元素：

var expandCollapseAll = document.createElement('button');
expandCollapseAll.innerHTML = ">";
var elementToAppend = document.getElementsByClassName("k-group-cell k-header");
elementToAppend[0].appendChild(expandCollapseAll);
expandCollapseAll.onclick = toggleExpandCollapse;

toggleExpandCollapse 函数将触发网格上所有.k-icon.k-collapse 和.k-icon.k-expand 元素的click 事件。

全部折叠：

$("#grid").find(".k-icon.k-collapse").trigger("click");

全部展开：

$("#grid").find(".k-icon.k-expand").trigger("click");

我创建了一个sample JSFiddle 来演示上述操作。

注意：按钮的 CSS 有点偏离，但这应该足以让您继续前进 :)

【讨论】：