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

Flapjack

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

Dynah

@SrinivasPotluri: You are welcome! One common remark: you should use your voting right more active. In 11 months you used the right only 5 times. Voting is the main criteria for searching engine, because the idea is that the users of stackoverflow decides which information (answers or questions) are helpful. You have right to vote 30 questions or answers per day (see here). So if you'd see some information on stackoverflow which you find helpful and if you want help other users to find the information you should vote it up. – Dynah

@Dynah I thought there had to be a better way to do this :) I had a strong suspicion you would come into this question and provide a much better answer then mine! – Salvador

@Dynah Noted. I'll use on my voting more often. – Flapjack

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 );
            }
        ....

Salvador