Reputation: 199
I'm getting response from server that gives data in grouping in a specific order. But when I load that data in my jqGrid it automatically sort groups in alphabetically order, and I want the order in which server provided me data.
For example I'm getting data in three groups i-e university , college , school
Now this can be sorted as increasing order i-e college , school , university
Or
Can be sorted as decreasing order i-e university , school , college
What should I do so that the order will remain in the same order as I'm getting it back from server?
I want to make some addition the response of server is stored in an object and then I load that data in a grid so I guess its local data... Sorry I'm new to jqGrid
Here is my code for jqgrid.
GRID = $("#"+GRID_ID).jqGrid({
url: sample,
datatype: 'json',
jsonReader : {
root:"rows",
page: "page",
total: "total",
records: "records",
//repeatitems: false,
},
colNames: ['File', 'UID', 'Order', 'Type', 'Project','Method', 'Phase' , 'Group'],
colModel: [{
name: 'file',
index: 'file',
width: 140
}, {
name: 'uid',
index: 'uid',
width: 80
}, {
name: 'order',
index: 'order',
width: 60,
sortable:true
}, {
name: 'type',
index: 'type',
width: 75,
editable:true,
edittype:"select",
editrules: { required: true }
}, {
name: 'project',
index: 'project',
width: 100,
editable:true,
edittype:"select",
editrules: { required: true }
}, {
name: 'method',
index: 'method',
width: 60,
editable:true,
edittype: "select",
editrules: { required: true },
//editoptions: { size: 71}
},{
name: 'phase',
index: 'phase',
width: 75,
editable:true,
edittype:"select",
editrules: { required: true }
},{
name: 'group',
index: 'group',
width: 75,
sortable: false,
hidden:false
}],
loadComplete: function() {
$("#"+GRID_ID).setColProp('type', { editoptions: { value: types} });
$("#"+GRID_ID).setColProp('project', { editoptions: { value: project} });
},
//rowNum: 10,
autowidth: true,
rowList: [10, 50, 100],
pager: $("#"+PAGER_ID),
loadonce: true,
sortname: 'order',
viewrecords: true,
sortOrder: "asc",
multiSort: false,
pgbuttons: true,
pginput: true,
cellEdit: true,
cellsubmit : 'clientArray',
editurl: 'clientArray',
height: "100%",
toolbar: [true, "bottom"],
grouping:true,
groupingView : {
groupField : ['group'],
groupDataSorted : true,
groupSorted:false,
groupColumnShow:[true],
sortable:false
},
caption: 'JqGrid Examples'
}).navGrid("#"+PAGER_ID, {
edit: false,
add: false,
del: false
});
Upvotes: 1
Views: 541
Reputation: 365
I have also had same problem. i have solved like below.
1) Added index filed in the row
2) provided order(like 1,2,3....) for each row on server side
3) And settings in JQGrid
loadonce: false,
altRows: true,
sortname: 'index', /* this filed */
sortorder: "asc", /* this filed */
grouping: true,
groupingView: {
groupField: ['group'],
groupColumnShow: [false],
groupCollapse: true,
groupSorted: false, /* this filed */
groupDataSorted: true /* this filed */
},
with All 4 /* this filed*/ values , we can achive this.
Suppose in your case groups(elements in group ) like university(a,b) , college(x,y,z) , school(p,q,r,s,t).
Then on server side. (index, elment) (1,a),(2,b),(3,x),(4,y),.....(10,t). Try this ,if didnt work let know. Thanx.
Upvotes: 1