How can we have global Expand/Collapse for JQGrid when we have rows grouped on some field?

Question

On expanding, it should expand all groups and on collapsing all groups should be collapsed.

Oleg · Accepted Answer · 2011-12-04T22:55:39.347

3

You can set default value of the groupCollapse property of the groupingView parameter of jqGrid in the same way like you set any other default parameter:

$.extend($.jgrid.defaults, {
    groupingView: {
        groupCollapse: true
    }
});

UPDATED: After additional explanation in the comments I can me imagine that in some cases it can has the behavior when all groups will be expanded/collapsed if any from the groups will be expanded/collapsed.

var $grid = $("#list"), inOnClickGroup = false;

$grid.jqGrid({
    // ... other options
    grouping: true,
    onClickGroup: function (hid) {
        var idPrefix = this.id + "ghead_", id, i, l,
            groups = this.p.groupingView.sortnames[0];

        if (!inOnClickGroup && hid.length > idPrefix.length &&
                hid.substr(0, idPrefix.length) === idPrefix) {
            id = Number(hid.substr(idPrefix.length));
            if (typeof (groups[id]) !== "undefined") {
                inOnClickGroup = true; // set to skip recursion
                for (i = 0, l = groups.length; i < l; i++) {
                    if (i !== id) {
                        $(this).jqGrid('groupingToggle', this.id + 'ghead_' + i);
                    }
                }
                inOnClickGroup = false;
            }
        }
    }
});

See the demo.

edited Dec 04 '11 at 22:55

answered Dec 03 '11 at 17:31

Oleg

220,925
34
403
798

This is not my requirement, I want collapse/expand for all groups. The option that you have suggested is for collapsing at each group level. – Suresh Balla Dec 04 '11 at 03:08
@Suresh: Could you explain more clear what you want. Pictures can be helpful. jqGrid support only one level of grouping, so I don't understand where are difference between "collapse for all groups" and "collapsing at each group level". – Oleg Dec 04 '11 at 09:08
thanks for the response. Say for example, on grouping by date, I get three groups for 3 days. For each of the group we can have expand and collapse to see/hide rows in that group. Now my requirement is, I need to have one expand and collapse - on expanding this, all groups should be expanded and on collapsing, all groups should be collapsed. I hope you got what I mean. This way, it helps user to avoid expanding each group to see all the results. – Suresh Balla Dec 04 '11 at 17:21
Thats awesome @Oleg. But can we have this functionality without disturbing the individual group events? I mean we need to add an extra element for expand and collapse on top of all groups and handle the functionality here. This way user can individually expand a particular group while having other groups in collapsed mode. – Suresh Balla Dec 05 '11 at 02:22
@Suresh: The stackoverflow in not the place where somebody implement any your requirements. I shown you how you can enumerate all groups and how to expand/collapse there with respect of `groupingToggle`. The other changes you should be able to do yourself. You should just replace `this` inside of `onClickGroup` to `$("#list")[0]` and `$(this)` to `$("#list")`. – Oleg Dec 05 '11 at 07:25
thanks. I was thinking to have some global expand/collapse with in the grid, which might require updates to plugin as we need to update the html generation in the plugin. Thats why I have asked you. Anyways, now I have implemented this outside the grid. – Suresh Balla Dec 05 '11 at 14:30
@Suresh: It's better first to integrate the feature as external button. You can also use `navButtonAdd` at add custom button which can be used by the user for the same purpose. – Oleg Dec 05 '11 at 14:43
Here my combined solution (based on iterating groups solution provided by @Oleg and toggling on condition based - on my understand from plug in code) – Suresh Balla Dec 06 '11 at 06:36

score 1 · Answer 2 · edited Dec 06 '11 at 09:25

$('#grid-expand-collapse').change(function () {

    var idPrefix = "MyGridghead_", index, length, tarspan;
    var groups = $(options.gridElement)[0].p.groupingView.sortnames[0];

    if ($(this).is(':checked')) {

        for (index = 0, length = groups.length; index < length; index++) {

            tarspan = $("#MyGridghead_" + index + " span." + "tree-wrap-" + $(options.gridElement)[0].p.direction);
                if (!tarspan.hasClass($(options.gridElement)[0].p.groupingView.minusicon)) {
                    $(options.gridElement).jqGrid('groupingToggle', 'MyGridghead_' + index);
                }
        }
    }
    else {
        for (index = 0, length = groups.length; index < length; index++) {

            tarspan = $("#MyGridghead_" + index + " span." + "tree-wrap-" + $(options.gridElement)[0].p.direction);
            if (tarspan.hasClass($(options.gridElement)[0].p.groupingView.minusicon)) {
                $(options.gridElement).jqGrid('groupingToggle', 'MyGridghead_' + index);
            }
        }
    }

});

score -3 · Answer 3 · edited Dec 10 '14 at 07:23

-3

$('#jqxGrid').jqxGrid({
    groupsexpandedbydefault: true
});

worked like a charm for me (source).

edited Dec 10 '14 at 07:23

hon2a

7,006
5
41
55

answered Dec 10 '14 at 06:56

Tirtharup Bhattacharyya

91
1
2

2

Question was regarding to JQGrid not JQXgrid. – Pavan Tiwari Feb 23 '15 at 12:29

How can we have global Expand/Collapse for JQGrid when we have rows grouped on some field?

3 Answers3

Linked