CODEWITHSUNDEEP
jqgrid
Shaggy
Shaggy

Reputation: 315

Global Expand/ collapse button for jqGrid with subgrids

I am using jqGRid with subgrid configuration to display my data. I would like to have global expand & collapse button to display or hide all subgrid information. Does jqGrid library provide this feature by any means?

Upvotes: 4

Views: 5817

Answers (3)

moshefnord
moshefnord

Reputation: 304

This will work for all rows that are already loaded. You might need to scope the selector a bit, as fits your needs.

function expandAll () {
  $( ".tree-plus" ).click();
};
function collapseAll () {
  $( ".tree-minus" ).click();
};

Upvotes: 0

Swap
Swap

Reputation: 1

You can simply make it to behave like as toggle as follows.

  1. Take a button.

  2. onlick of it call the function, say toggleSubgrid();

    function toggleSubgrid(){
    if($('#YOURGRIDID td').hasClass('sgexpanded')){
        $('.ui-icon-minus').trigger('click');
    }
    else if($('#YOURGRIDID td').hasClass('sgcollapsed')){
        $('.ui-icon-plus').trigger('click');
    }
}

Upvotes: 0

Oleg
Oleg

Reputation: 221997

jqGrid has no "Expand/Collapse all". I modified the demo from the old answer which demonstrates creating on grid with local subgrids. The resulting demo you can see here:

enter image description here

and it has additional "+" button in the column header of "subgrids" column. If one clicks on the button all subgrids will be expanded:

enter image description here

I used the following code in the demo:

var subGridOptions = $grid.jqGrid("getGridParam", "subGridOptions"),
    plusIcon = subGridOptions.plusicon,
    minusIcon = subGridOptions.minusicon,
    expandAllTitle = "Expand all subgrids",
    collapseAllTitle = "Collapse all subgrids";
$("#jqgh_" + $grid[0].id + "_subgrid")
    .html('<a style="cursor: pointer;"><span class="ui-icon ' + plusIcon +
          '" title="' + expandAllTitle + '"></span></a>')
    .click(function () {
        var $spanIcon = $(this).find(">a>span"),
            $body = $(this).closest(".ui-jqgrid-view")
                .find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable>tbody");
        if ($spanIcon.hasClass(plusIcon)) {
            $spanIcon.removeClass(plusIcon)
                .addClass(minusIcon)
                .attr("title", collapseAllTitle);
            $body.find(">tr.jqgrow>td.sgcollapsed")
                .click();
        } else {
            $spanIcon.removeClass(minusIcon)
                .addClass(plusIcon)
                .attr("title", expandAllTitle);
            $body.find(">tr.jqgrow>td.sgexpanded")
                .click();
        }
    });

Upvotes: 6

Related Questions