Kendo UI Grid - Grouping Table Header

Question

I want to implement the functionality of Collapse/Expand all (in AngularJs) for grouped Kendo UI Grid and add it to the Grid's header. Do you have any idea how could I put my functionality in there (see the attached file). Thanks!

Dojo with a normal grid with grouping activated

Answer 1

You can dynamically create a button element on k-group-cell k-header element:

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

The toggleExpandCollapse function would trigger the click event of all .k-icon.k-collapse and .k-icon.k-expand elements on the grid.

To collapse all:

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

To expand all:

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

I have created a sample JSFiddle to demonstrate the above in action.

NOTE: The CSS of the button is a little off but this should be enough to get you going :)