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 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").css("background-position", "0 -224px");
    } else {
        $("#expandAllCollapseAll").css("background-position", "0 -192px");

//Credit Daniël from

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++) {
    } else if (direction == 'expand') {
        $(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
        $(".toggleDetail").text("Collapse all rows");
        for (var i = 0; i < allMasterRows.length; i++) {