Kendo UI Grid - 分组表头

Question

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

Dojo with a normal grid with grouping activated

Answer 1

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

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

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

全部崩溃：

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

扩展所有：

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

我创建了一个sample JSFiddle来演示上面的内容。

注意：按钮的CSS有点偏，但这应该足以让你去：）