This is a migrated thread and some comments may be shown as answers.

Collapse all grid rows

19 Answers 833 Views
This is a migrated thread and some comments may be shown as answers.
Drew
Top achievements
Rank 1
Drew asked on 25 Jan 2012, 04:59 PM
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?

19 Answers, 1 is accepted

Sort by
0
Drew
Top achievements
Rank 1
answered on 26 Jan 2012, 09:39 AM
Bump.
0
Drew
Top achievements
Rank 1
answered on 07 Feb 2012, 10:46 AM
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));
        }
    }
}
0
George
Top achievements
Rank 1
answered on 30 Mar 2012, 03:49 PM
what's prmGridId? I have grid not defined errors.
0
Drew
Top achievements
Rank 1
answered on 30 Mar 2012, 04:00 PM
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.
0
Vadivel
Top achievements
Rank 1
answered on 18 Apr 2012, 07:35 PM
how to call function name in kendo grid detailtemplates
0
Drew
Top achievements
Rank 1
answered on 19 Apr 2012, 08:19 AM
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.
0
Drew
Top achievements
Rank 1
answered on 19 Apr 2012, 10:01 AM
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;
    });
}
0
Mohit
Top achievements
Rank 1
answered on 28 May 2012, 01:48 PM
From where should i call these functions (DisableGridDetailRowExpanding).
0
Drew
Top achievements
Rank 1
answered on 28 May 2012, 02:07 PM
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).
0
Mohit
Top achievements
Rank 1
answered on 29 May 2012, 06:29 AM
How do you clear the bindings when the row is collapsed?
0
Drew
Top achievements
Rank 1
answered on 29 May 2012, 08:31 AM
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.
0
Daniël
Top achievements
Rank 2
answered on 13 Feb 2013, 09:10 AM
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');">
0
Drew
Top achievements
Rank 1
answered on 13 Feb 2013, 10:32 AM
Thanks Daniel, I'll give it a whirl.
0
Dave
Top achievements
Rank 1
answered on 28 Mar 2013, 07:17 PM
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;
             
            ....
 
        }
    }

0
Peter
Top achievements
Rank 1
answered on 30 Sep 2016, 07:10 AM
Awesome.  Thanks
0
Gilbert van Veen
Top achievements
Rank 1
answered on 06 Jul 2017, 01:15 PM
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));
        }
    }
}

 

I use the function above to expand/collaps the grid rows. But it will collapse/expand ALL the rows in the grid instead of the rows on the current page (I use paging).

Is it possible to collapse only the rows on the selected page?

0
Gilbert van Veen
Top achievements
Rank 1
answered on 06 Jul 2017, 01:23 PM

Sorry!!!

Forget my reply, it does only the current page, it only takes a lot of time (I have 100 rows).

 

0
Stefan
Telerik team
answered on 11 Jul 2017, 10:30 AM
Hello Gilbert,

Please have in mind that expanding 100 rows is very resource consuming operation as it will have to create a 100 new widgets. The performance also greatly depends on the browser and the used machine.

In this scenario, I can suggest using paging to the Grid to reduce the number of rows to expand.

This will also require to slightly change the expand logic to affect only the current page. This can be achieved by retrieving the current page and the current pageSize:

function CollapseAllKendoGridDetailRows(prmGridId)
{
    //Get a collection of all rows in the grid
    var grid = $('#' + prmGridId).data('kendoGrid');
    var currentPage = grid.dataSource.page()
    var currentPageSize = grid.dataSource.pageSize()
    var firstItemIndex = currentPage * currentPageSize
    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 = firstItemIndex; i < firstItemIndex +currentPageSize ; i++)
    {
        if (allMasterRows.eq(i).next('tr.k-detail-row').length > 0)
        {
            grid.collapseRow(allMasterRows.eq(i));
        }
    }
}

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-page

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-pageSize

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gilbert van Veen
Top achievements
Rank 1
answered on 11 Jul 2017, 10:47 AM

Hi Stefan,

 

Many thanks, very clear!

 

Best regards,

 

Gilbert

Tags
Grid
Asked by
Drew
Top achievements
Rank 1
Answers by
Drew
Top achievements
Rank 1
George
Top achievements
Rank 1
Vadivel
Top achievements
Rank 1
Mohit
Top achievements
Rank 1
Daniël
Top achievements
Rank 2
Dave
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Gilbert van Veen
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or