Collapse all grid rows

16 posts, 0 answers
  1. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 25 Jan 2012 Link to this post

    I have a grid with expandable detail rows.  I only want to allow one row to be open at once, so when a user clicks the arrow to expand one row, it automatically closes all others.

    I tried to adapt this code used with some previous Telerik libraries...

    function toggleClick(expand) {
                var grid = $("#Orders").data("tGrid");
                grid.$rows().each(function () {
                    if (expand) {
                        grid.expandRow(this);
                    }else{
                        grid.collapseRow(this);
                    }
                });
            }
            function expandDetails() {
                toggleClick(true);
            }
            function collapseDetails() {   
                toggleClick(false);
            }

    ...but Kendo doesn't like the '$rows().each'.  Can someone point me in the right direction?
  2. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 26 Jan 2012 Link to this post

    Bump.
  3. Kendo UI is VS 2017 Ready
  4. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 07 Feb 2012 Link to this post

    For anyone else looking for how to do this, I've had to come up with my own way:

    function CollapseAllKendoGridDetailRows(prmGridId)
    {
        //Get a collection of all rows in the grid
        var grid = $('#' + prmGridId).data('kendoGrid');
        var allMasterRows = grid.tbody.find('>tr.k-master-row');
     
        //Loop through each row, if a row has a detail row following it then collapse that master row
        for (var i = 0; i < allMasterRows.length; i++)
        {
            if (allMasterRows.eq(i).next('tr.k-detail-row').length > 0)
            {
                grid.collapseRow(allMasterRows.eq(i));
            }
        }
    }
  5. George
    George avatar
    18 posts
    Member since:
    Feb 2012

    Posted 30 Mar 2012 Link to this post

    what's prmGridId? I have grid not defined errors.
  6. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 30 Mar 2012 Link to this post

    prmGridId is the id of the DIV tag that you're using to house the Kendo grid control. You must have already run the grid creation functions before calling this function, it works on an existing grid.
  7. Vadivel
    Vadivel avatar
    10 posts
    Member since:
    Apr 2012

    Posted 18 Apr 2012 Link to this post

    how to call function name in kendo grid detailtemplates
  8. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 19 Apr 2012 Link to this post

    Unfortunately this function cannot really be called during the ExpandDetailRow event (which is what I think you mean), as it instantly closes the row that has just been expanded.

    The only thing I can think to do is attach a call to this function to the onclick handler for the expand arrow on each master row, so that it fires before the ExpandDetailRow event.
  9. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 19 Apr 2012 Link to this post

    Despite all my experiments to fire this during a row expand, I have not come up with a way that I'm completely happy with.

    So I've had to go for a more direct route: when a detail row is expanded I disable the expanding of any other detail rows:
    function DisableGridDetailRowExpanding()
    {
        $('a.k-icon.k-plus').click(function ()
        {
            return false;
        });
    }
     
    function DisableGridPaging()
    {
        $('div.k-grid-pager a').click(function ()
        {
            return false;
        });
    }
  10. Mohit
    Mohit avatar
    3 posts
    Member since:
    May 2012

    Posted 28 May 2012 Link to this post

    From where should i call these functions (DisableGridDetailRowExpanding).
  11. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 28 May 2012 Link to this post

    I call both of these during the detail row expand event, and then I clear these bindings when the row is collapsed. This means the user has to manually collapse the row before expanding another one, which is a bit of a workaround, but I couldn't get the grid to work the way I wanted with my old code (essentially I wanted it to work like an accordion, where expanding another row collapses all others).
  12. Mohit
    Mohit avatar
    3 posts
    Member since:
    May 2012

    Posted 29 May 2012 Link to this post

    How do you clear the bindings when the row is collapsed?
  13. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 29 May 2012 Link to this post

    There is a detailCollapse event you could bind a function to, then from that function you could call:
    	$('a.k-icon.k-plus').off('click');
    	$('div.k-grid-pager a').off('click');
    to remove all bindings, or you could call a grid refresh from it:
    	var grid = $('#grid').data('kendoGrid');
    grid
    .refresh();
    To just repaint the grid.
  14. Daniël
    Daniël avatar
    9 posts
    Member since:
    Sep 2012

    Posted 13 Feb 2013 Link to this post

    thank you Drew,

    I have modified your function to that is shown below, it now expands and collapses the rows with the same button.

    function ToggleAllKendoGridDetailRows(direction) {
            //Get a collection of all rows in the grid
            var grid = $('#Grid').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));
                }
            }
        }
    call the function like:
    <a href="#" class="toggleDetail" title="Expand all rows" onclick="ToggleAllKendoGridDetailRows('expand');">
  15. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 13 Feb 2013 Link to this post

    Thanks Daniel, I'll give it a whirl.
  16. Dave
    Dave avatar
    17 posts
    Member since:
    Jan 2009

    Posted 28 Mar 2013 Link to this post

    I got it to work by simply saving the last expanded master row and collapsing that row.

    using the DetailExpand event
    var LastDetailsRow;
        function ShowDetails(arg) {
     
            if (LastDetailsRow != null && LastDetailsRow.index() != arg.masterRow.index()) {
                arg.sender.collapseRow(LastDetailsRow);
            }
     
           LastDetailsRow = arg.masterRow;
                 
                ....
     
            }
        }

  17. Peter
    Peter avatar
    1 posts
    Member since:
    Oct 2015

    Posted 30 Sep in reply to Drew Link to this post

    Awesome.  Thanks
Back to Top
Kendo UI is VS 2017 Ready