jqGrid sorting a column while grouping consider grouping header

Question

I have jqgrid. I've grouped few rows based on a column value. Working demo is available at link part of the code that defines jqGrid

    var preclosingtable = $('#preclosing');
    preclosingtable.jqGrid({
        datatype: 'local',
        data: data.DOCS,
        colNames: ['', 'Documents Received', 'Comments', 'NA', 'DocGroup'],
        colModel: [
        { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 20 },
        { name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 },
        { name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 },
        { name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} },
            { name: 'DocGroup', index: 'DocGroup', editable: false, width: 1 }
        ],
        rowNum: data.DOCS.length,
        //rowList: [10, 20, 30],
        pager: '#preclosingpagerdiv',
        viewrecords: true,
        sortorder: "asc",
        sortname: 'Documents',
        grouping: true,
        groupingView: {
            groupField: ['DocGroup'],
            groupColumnShow: [false],
            groupDataSorted: true,
            groupOrder : 'asc'
        },
        localReader: {
            id: 'ConfigId'
        },
        shrinkToFit: false,
        height: 'auto',
        loadComplete: function () {
            HideGroupHeaders(this);
        },
        onSelectRow: function (id) {
            preclosingtable.jqGrid('saveRow', previouslyselectedRow, false, 'clientArray');
            previouslyselectedRow = SetJQGridRowEdit(id, previouslyselectedRow, preclosingtable);
        }
    });

Following is how my grid looks like

Issue: Is it possible to sort rows in this grid so that the final grid has rows in the following Order

• Alabama
• D
• Maine
• NewJersey
• Q
• Virginia

Answer 1

If I correctly understand your problem you can solve your problem by adding custom sorting function (see here, here and here) on the column DocGroup where you do the grouping:

sorttype: function (cellvalue, rowObject) {
    return cellvalue? cellvalue : rowObject.Documents;
}

As the result the input data which have empty DocGroup will be sorted and so grouped by Documents. You will see the results on Fiddle

Answer 2

Two things come to my mind, you could create another row to sort on in the grid. Not place any data into that column on the server side, and then add data to the column in the beforeProcessing function on the jqGrid.

In the beforeProcessing function you could test the grouping data and use the first characters to populate this column, and then if the value is blank (for your D, Q examples above) you would use those values.

Here is the beforeProcessing function that you could use as a basis to fill this column that you would then sort on:

        beforeProcessing: function (data, status, xhr) {
            for (var x = 0, length = data.rows.length; x < length; x++) {
                var valueToPutInSortColumn = ....
                data.rows[x].cell.splice(sortColumnIndex, 0, valueToPutInSortColumn );
            }
        ....