CODEWITHSUNDEEP
jqueryjqgridjqgrid-asp.net
fcmaine
fcmaine

Reputation: 359

jqGrid sorting a column while grouping consider grouping header

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 jqGrid after grouping

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

Upvotes: 5

Views: 7274

Answers (2)

Oleg
Oleg

Reputation: 222017

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

enter image description here

Upvotes: 12

Mark
Mark

Reputation: 3123

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

Upvotes: 1

Related Questions