剣道UIグリッド - グループ化テーブルヘッダー

Question

グループ化された剣道UIグリッドのすべてを（AngularJsで）折りたたむ/展開する機能を実装し、グリッドのヘッダーに追加したいと考えています。どのように私はそこに自分の機能を置くことができるか考えていますか（添付ファイル参照）。ありがとう！

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機能は、グリッド上のすべての.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は少しオフになっているが、これはあなたが:)