CODEWITHSUNDEEP
javascriptjqueryjqgrid
DRobertE
DRobertE

Reputation: 3508

jqgrid auto sorting the data on grouped column, how can this be turned off?

I have a jqgrid with grouping, however the data coming back from the server is already grouped, I simply want to apply the jqgrid grouping look to the data. I've included a jsfiddle since a picture speaks 1000 words. THE DATA IS INCLUDED IN THE FIDDLE...

Link to fiddle : http://jsfiddle.net/Rab815/p8Zsk/

$('table').jqGrid({
    data: data,
    datatype: "local",
    rowNum:100,
    gridview: true,
    deepempty: true, 
    hoverrows: false, 
    headertitles: true,
    height:'600px',
    viewrecords:true,
    hoverrows: true,
    sortable: true,
    altRows: true,
    colModel: [
        { label: "Group Name", name:'groupName', field:"groupName", sortable:false},
        { label: 'Name', field: 'name', name:'name' },
        {
            label: 'Date Modified', field: 'lastGenerated', name:'lastGenerated'
        }
    ],
    grouping:true,
    groupingView:
        {
            groupField: ['groupName'],
            groupColumnShow: [true], 
            groupCollapse: true,
        },
    shrinkToFit: false
});

enter image description here

However I need it displayed in this order

enter image description here

Now, if you put the data in an editor so each block appears on one line, the data is already coming back grouped from the DB in the order I want it to appear. but the grid is sorting the groupName data field in 'asc' order and far as I can tell it can't be turned off.

The Grouping Column would eventually be set to groupColumnShow: [false]

ANSWER from Olegs FIDDLE...

Included a

groupOrder

in the data coming from the server rather than doing the mapping.

Altered ColModel for GroupName as follows

{
    label: "Group Name", field: "groupName",
    sorttype: function (cellValue, obj) {
                    return obj.groupOrder;
                    //return groupOrder[obj.groupId];
}

Now everything appears in the correct order. This solution allows the sort, which defaults to "asc" in jqgrid to order the grouped data by a different value other than the grouped data itself.

Thanks! This had me stumped for quite a while!

Upvotes: 4

Views: 3786

Answers (1)

Oleg
Oleg

Reputation: 221997

The problem exist because you use datatype: "local" with the data loaded from the server.

To solve your problem you can define sorttype property as function in the column "groupName" by which you sort. The function should return the value which can be used instead of the column value. For example you can extend the items of the data with new field groupOrder for example and use 

sorttype: function (cellValue, obj) {
    return groupOrder[obj.groupId];
}

The field should be filled on the server.

Alternatively you can fill the map between groupId in your current data model and the index to the group order. For example the code

var groupOrder = {}, i, l = data.length, groupId, groupIndex = 1;

for (i = 0; i < l; i++) {
    groupId = data[i].groupId;
    if (groupOrder[groupId] === undefined) {
        groupOrder[groupId] = groupIndex++;
    }
}

fills groupOrder in the same order in which you have the groups (you can use data[i].groupName instead of data[i].groupId in the same way). Having such groupOrder you can use

sorttype: function (cellValue, obj) {
    return groupOrder[obj.groupId];
}

The demo http://jsfiddle.net/p8Zsk/38/ use the approach and it displays the groups in correct order.

Upvotes: 3

Related Questions