5

I am using a filter for my jqGrid grid, and the data is in groups, defaulting first state of collapsed. If a user open a group or 2 (expaning the groups) , then does the filter, the grid reloads the data, filters it correctly, but then I loose the expanded state of the groups the user opened. Is there a way to not have it, toggle back to the default state of collapsed when doing a filter?

Thanks in Advance.

D-S
  • 107
  • 2
  • 10

1 Answers1

2

I find your question interesting. So +1 from me. I made a demo which shows how to implement your requirements.

The main idea of the implementation is the same as in the answer. I suggest just hold the state of expanded groups in an array expandedGroups. I use onClickGroup callback added in jqGrid 4.0.0 (see here). Inside of loadComplete callback I try to expand all items from the array expandedGroups.

The advantage of the implementation is that the expanded state not disappear during paging, sorting and filtering.

The demo you can see here. Below in the code from the demo:

var $grid = $("#list"), expandedGroups = [];

$grid.jqGrid({
    // ... some jqGrid parameters
    grouping: true,
    groupingView: {
        groupField: ['name'],
        groupCollapse: true,
        groupDataSorted: true
    },
    onClickGroup: function (hid, collapsed) {
        var idPrefix = this.id + "ghead_", id, groupItem, i;
        if (hid.length > idPrefix.length && hid.substr(0, idPrefix.length) === idPrefix) {
            id = hid.substr(idPrefix.length);
            groupItem = this.p.groupingView.sortnames[0][id];
            if (typeof (groupItem) !== "undefined") {
                i = $.inArray(expandedGroups[i], groups);
                if (!collapsed && i < 0) {
                    expandedGroups.push(groupItem);
                } else if (collapsed && i >= 0) {
                    expandedGroups.splice(i, 1); // remove groupItem from the list
                }
            }
        }
    },
    loadComplete: function () {
        var $this = $(this), i, l, index, groups = this.p.groupingView.sortnames[0];
        for (i = 0, l = expandedGroups.length; i < l; i++) {
            index = groups.indexOf(expandedGroups[i]);
            if (i >= 0) {
                $this.jqGrid('groupingToggle', this.id + 'ghead_' + index);
            }
        }
    }
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
    {multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true,
        closeAfterSearch: true});

UPDATED: Grouping module of jqGrid are changed in many parts since my original answer. The modified demo one can find here. The most important part of the code used one can see below

grouping: true,
groupingView: {
    groupField: ["invdate"],
    groupCollapse: true,
    groupDataSorted: true
},
onClickGroup: function (hid, collapsed) {
    var idPrefix = this.id + "ghead_", i, groupid,
        $this = $(this),
        groups = $(this).jqGrid("getGridParam", "groupingView").groups,
        l = groups.length;

    if (!inOnClickGroup) {
        inOnClickGroup = true; // set to skip recursion
        for (i = 0; i < l; i++) {
            groupid = idPrefix + groups[i].idx + "_" + i;
            if (groupid !== hid) {
                $this.jqGrid("groupingToggle", groupid);
            }
        }
        inOnClickGroup = false;
    }
}

The variable inOnClickGroup are defined in the outer scope.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you so much, It would have taken a little while to work this, But my experience is limited from this core. Quite straight forward, but when everyone exploits there specialties, it helps the community. Thank you for saving my time, I hope to help others the same way,. – D-S Dec 01 '11 at 22:19
  • @Oleg Is this still the best way to do this? I'm getting a `this.p.groupingView.sortnames[0] is undefined` error. – Mark Aug 05 '13 at 17:48
  • @Mark: jqGrid are changed since my original answer. [The demo](http://www.ok-soft-gmbh.com/jqGrid/ExpandingStateOfGroups_.htm) demonstrate updated demo code. See **UPDATED** part of my answer. – Oleg Aug 11 '13 at 16:54
  • very nice answer, i got my solution from this, thank u very much – Abhijit Pandya Mar 27 '14 at 08:00
  • @Oleg: In the latest demo, when I click on a group toggle, it toggles *all* groups at once (all open or all closed), and the state is not remembered during a sort/page operation. Has anything changed? I might take a crack at fixing this later. – Cᴏʀʏ May 22 '14 at 18:47