4

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?

Shaggy
  • 315
  • 2
  • 9
  • 23
  • 1
    It's important to know how you create subgrids. Do you load the data from the server by creating grid inside of `subGridRowExpanded` with the option `datatype: "json"` or you have already loaded the data for all subgrids *before* and you use `datatype: "local"` for all subgrids. `expandOnLoad: true` of `subGridOptions` will not work for `datatype: "json"`. Moreover you should clear what you mean under "Global Expand/ collapse button". It's no button exists in the standard jqGrid GUI, but you can add your custom button somewhere in the grid. – Oleg Oct 28 '13 at 13:14
  • @Oleg Hi, I am using local datatype for subgrids. I just want to know that like + button to individual main grid row to expand & collapse respective subgrid; can I have one + button in top left corner of grid to expand/collapse all subgrids by setting any grid property. As you are saying there is no such property so I need to add my custom button there & bind click event to it which will perform as required. Is this what you are suggesting? – Shaggy Oct 28 '13 at 13:37

3 Answers3

6

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();
        }
    });
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Hi Oleg, you need to modify your demo. In demo if user clicks on global expand-collapse button it toggles the state of parent grid row. Instead it should fire the expand / collapse command based on the icon of global button. – Shaggy Oct 31 '13 at 06:15
  • @Shaggy: Sorry, but I can't understand what you mean. Which "state" you mean in "it toggles the state of parent grid row"? You should clear describe the testcase: what should one do, expected results, real results of the demo. – Oleg Oct 31 '13 at 08:38
  • Hi, Please perform following testcase with your demo. **Step-1** expand any one row to view subgrid. **Step-2** Now click on the expand all subgrid button that we have added to grid. **Expected Result** All subgrids should get expanded **Actual Result** The row that was not expanded by user in step 1 get expanded & the expanded one gets collapsed. I hope now this is clear to you. Once again I thank you to be there for every jqGrid problem in my project – Shaggy Oct 31 '13 at 09:32
  • Hi, I have updated the click event of expand all button's click event to resolve the issue I was discussing in last comment. – Shaggy Nov 01 '13 at 11:09
0

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');
    }
}
Pang
  • 9,564
  • 146
  • 81
  • 122
Swap
  • 1
  • 2
0

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();
};
moshefnord
  • 164
  • 2
  • 8