Question

I’m want to create a jqGrid with grouping:true, but only first group expanded and another groups stay collapsed when expand this group, was been collapsed, I need to load the data from the server.

Someone has a solution for that?

PS: I need use grouping, why the user can be select another columns to group on the fly.

Answer 1

To implement your requirements you should use groupCollapse: true to have all groups displayed in collapsed form. For example like

grouping: true,
groupingView: {
    groupField: ['invdate'],
    groupCollapse: true,
    groupDataSorted: true
}

and then expand the first group with respect of groupingToggle after the grid are filled. For example you can use the following code inside of loadComplete:

loadComplete: function () {
    var $this = $(this), firstGroup = $this.find('tr.jqgroup:first');
    if (firstGroup.length > 0) {
        $this.jqGrid('groupingToggle', firstGroup[0].id);
    }
}

If you remind the fact how the ids of the grouping rows of the grid will be constructed you can reduce the code to the following

loadComplete: function () {
    $(this).jqGrid('groupingToggle', this.id + 'ghead_0');
}

See the demo.

To change on the fly the column used for grouping you can use groupingGroupBy method:

$("#list").jqGrid('groupingGroupBy', columnName);

For example $("#list").jqGrid('groupingGroupBy', 'ship_via');. You should understand that the new groupField will be used only after the next filling of the grid body. So if you want to define on the server the grouping order and include it in the server response you should call groupingGroupBy method inside of beforeProcessing and not inside of loadComplete.