Collapse all grid rows

[Drew]

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?

[Drew]

Bump.

[Drew]

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

        }

    }

}

[George]

what's prmGridId? I have grid not defined errors.

[Drew]

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.

[Vadivel]

how to call function name in kendo grid detailtemplates

[Drew]

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.

[Drew]

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;

    });

}

[Mohit]

From where should i call these functions (DisableGridDetailRowExpanding).

[Drew]

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).

[Mohit]

How do you clear the bindings when the row is collapsed?

[Drew]

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.

[Daniël]

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');">

[Drew]

Thanks Daniel, I'll give it a whirl.

[Dave]

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;

             

            ....

 

        }

    }

[Peter]

Awesome.  Thanks

[Gilbert van Veen]

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?

[Gilbert van Veen]

Sorry!!!

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

 

[Stefan]

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

[Gilbert van Veen]

Hi Stefan,

 

Many thanks, very clear!

 

Best regards,

 

Gilbert