jqgrid - dynamically enabling grouping

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.