Creating a collapse all, expand all button on the Kendo UI Grid

The Kendo UI grid has some great functionality out of the box, especially it’s ability to handle hierarchcal data with detail item templates.

I wanted to include a expand/collapse all button right within my grid. Here was the code I used to do it. Credit to Daniël from http://www.telerik.com/forums/collapse-all-grid-rows on giving me the code I needed to perform the collapse/expand on all rows at once.

You need to hook into the parent grid’s databound method to add the button inline. Then it’s just a matter of wiring up the click events and using Daniël’s code and you’re all set.

function gridDataBound(e) {
    if ($("#MainGrid.k-widget.k-grid table thead.k-grid-header tr th.k-hierarchy-cell.k-header").find("span").length === 0) {
        $("#MainGrid.k-widget.k-grid table thead.k-grid-header tr th.k-hierarchy-cell.k-header").append("<span tabindex=\"-1\" href=\"#\" id=\"expandAllCollapseAll\" onclick=\"expandAllCollapseAllClick()\"  >&nbsp;&nbsp;&nbsp;</span>");
    }
}


function expandAllCollapseAllClick() {
    var expanded = $("#expandAllCollapseAll").hasClass("expanded");
    if (!expanded) {
        $("#expandAllCollapseAll").addClass("expanded");
        $("#expandAllCollapseAll").css("background-position", "0 -224px");
        ToggleAllKendoGridDetailRows("expand");
    } else {
        $("#expandAllCollapseAll").removeClass("expanded");
        $("#expandAllCollapseAll").css("background-position", "0 -192px");
        ToggleAllKendoGridDetailRows("collapse");
    }
}

//Credit Daniël from http://www.telerik.com/forums/collapse-all-grid-rows

function ToggleAllKendoGridDetailRows(direction) {
    //Get a collection of all rows in the grid
    var grid = $('#MainGrid').data('kendoGrid');
    var allMasterRows = grid.tbody.find('>tr.k-master-row');

    //Loop through each row and collapse or expand the row depending on set deriction
    if (direction == 'collapse') {
        $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('expand')");
        $(".toggleDetail").text("Expand all rows");
        for (var i = 0; i < allMasterRows.length; i++) {
            grid.collapseRow(allMasterRows.eq(i));
        }
    } else if (direction == 'expand') {
        $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
        $(".toggleDetail").text("Collapse all rows");
        for (var i = 0; i < allMasterRows.length; i++) {
            grid.expandRow(allMasterRows.eq(i));
        }
    }