Kendo UI Grid - 分組表格標頭

Question

我想實現分組Kendo UI Grid的Collapse/Expand all（在AngularJs中）的功能並將其添加到Grid的標題中。你有什麼想法，我怎麼能把我的功能放在那裏（見附件）。謝謝！

Dojo with a normal grid with grouping activated

Answer 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功能將觸發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是有點關閉，但這應該足以讓你去:)