Reputation: 314
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.
Upvotes: 1
Views: 1612
Reputation:
set your datatype:'local'
then
$("#list").setGridParam({datatype:'json'}).trigger('reloadGrid',[{page:1}]);
Upvotes: 1
Reputation: 221997
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
.
Upvotes: 3