Expand/Collapse all DetailViews in a grid

[Makoto]

So I have a grid that has a DetailView, and I wanted a way to be able to expand/collapse all of the rows with one click.

I thought I'd share my solution just in case someone else needs to do the same thing.

In either the document ready handler, or the grid onDataBound event handler, add the following to add a link in the header of the detail view column:

$(document).ready(function () {
    $('th.t-hierarchy-cell').html('<a href="#" title="Expand/Collapse all" onclick="return toggleDetail(this);" class="t-icon t-plus"></a>');
});

Then create a function that will handle the expanding/collapsing:

function toggleDetail(e) {

    var grid = $(e).closest('.t-grid').data('tGrid');

 

    if ($(e).hasClass('t-minus')) {

        grid.$rows().each(function (index) { grid.collapseRow(this); })

        $(e).removeClass('t-minus');

    } else {

        grid.$rows().each(function (index) { grid.expandRow(this); })

        $(e).addClass('t-minus');

    }

      return false;


}

If someone else has a more elegant idea, please share it.

I added this code to a global javascript file that is referenced by every page so that all of my grids would have this capability. It'd be better to add this to the grid's databound event so that it resets it to the expand icon when the grid refreshes.

[Greg]

Thanks for the code, works nicely.

[Howard]

Excellent post, works great.

Can you please tell me, if one of the detailview is expanded, expand/collapse at the header is changed to 'minus' and vice versa?

Thank you