jqGrid Grouping state when filtering

Question

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.

Answer 1

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.