Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

  • Alabama
  • D
  • Maine
  • NewJersey
  • Q
  • Virginia
like image 490
fcmaine Avatar asked Apr 25 '13 16:04

fcmaine


2 Answers

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

like image 104
Oleg Avatar answered Oct 09 '22 08:10

Oleg


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 );
            }
        ....
like image 22
Mark Avatar answered Oct 09 '22 08:10

Mark