jqgrid - dynamically enabling grouping - jqgrid

Question

I was able to implement grouping feature from examples in the jqgrid demo page. But I don't want to enable grouping by default but on the change of a select list I would like to enable the grouping feature. I have tried several options but none of them were successful? Could some one please help me here, may be I am missing something. Here is my code...
$("#dynamicGrouping").change(function() {
var value = $(this).val();
if(value) {
if(value == '') {
$('#grid').jqGrid('groupingRemove', true);
} else {
$('#grid').jqGrid('setGridParam', { grouping:true });
$('#grid').jqGrid('groupingGroupBy', value);
$('#grid').trigger('reloadGrid');
}
}
});
My grid definition:
jQuery(function() {
$('#grid').jqGrid({
.....
.....
grouping: false,
groupingView : {
groupField : ['field_name'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupDataSorted : true
},
.......
.......
});
});

Answer 1

I supposed that you made some error in the code. The code which you posted seem me correct, but you don't need to set grouping:true and trigger reloadGrid additionally because groupingGroupBy do this you automatically.
The demo demonstrates setting or removing of grouping dynamically.
So you can use
$("#dynamicGrouping").change(function () {
var groupingName = $(this).val();
if (groupingName) {
$('#grid').jqGrid('groupingGroupBy', groupingName);
} else {
$('#grid').jqGrid('groupingRemove');
}
});
or a little more advanced version
$("#dynamicGrouping").change(function () {
var groupingName = $(this).val();
if (groupingName) {
$('#grid').jqGrid('groupingGroupBy', groupingName, {
groupOrder : ['desc'],
groupColumnShow: [false],
groupCollapse: true
});
} else {
$('#grid').jqGrid('groupingRemove');
}
});
UPDATED: Everything works with JSON data too: see the demo.
UPDATED 2: I looked in the code one more time and I found out that gridview will set to true at the initialization of grid: see the lines. If you don't have gridview: true and use initially grouping: false then you will be not able to change just grouping: true. You have to set also other parameters from the grouping limitations correctly.
So you have to hold the rules from limitations yourself:
scroll: false,
rownumbers: false,
treeGrid: false,
gridview: true,
By the way I recommend always use gridview: true because of better performance.