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

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));
        }
    }

Share Your Thoughts!

Testimonials

What My Clients Say

Karin - Hope and Future

Brent has always been very prompt and generally exceeds our expectations with his work. His maintenance fee is very reasonable. I strongly recommend him!  We get many compliments on our beautiful web site!

Dan

I contacted Krueger Web Design and Brent did everything.  He setup a test site with the changes so we could verify everything was correct before we transferred from my old hosting provider.  During the setup and conversion Brent was extremely professional and responsive. He responded to any issues the same day.

Dan Kaufman
Emily - GFCLT

We've had a great experience working with Krueger Web Design. Prompt responses, great ideas, effective work... all at a reasonable price! This was the perfect fit for our organization.

Mahmud - ACMC

I would love to recommend you to anyone! You have been very helpful when we needed you the most.

Brian - SEMNIC

Working with Krueger Web Design was effortless. Communicating what I wanted for the website and the results that I saw were identical. The customer service was always prompt and I am completely satisfied with the product.

Zach - Stadium Club

Exactly what I wanted! Fast turnaround time and very affordable. Answered all of our questions quickly and made adjustments promptly. Very easy to work with and puts everything into terminology that even I can understand!

Contact Krueger Web Design

Have a question for me? Need an estimate on some work? You can email me at brent@kruegerwebdesign.com or drop me a line using the button below:

Copyright © 2017 Krueger Web Design - All rights reserved
Web Design in Madison, WI