How do i sort grouped row header names when user clicks a column header [Trirand JqGrid 4.6]

Question

im using the Configure group header row sample of trirand JqGrid 4.6 from demo their site.

i will copy paste the code from website so the read it from this post

var mydata = [
        {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
        {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];
jQuery("#list483").jqGrid({
    data: mydata,
    datatype: "local",
    height: 'auto',
    rowNum: 30,
    rowList: [10,20,30],
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
        {name:'name',index:'name', width:100, editable:true},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},      
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    pager: "#plist483",
    viewrecords: true,
    sortname: 'name',
    grouping:true,
    groupingView : {
        groupField : ['name'],
        groupColumnShow : [false],
        groupText : ['<b>{0} - {1} Item(s)</b>']
    },
    caption: "Configure group header row"
});

In demo rows are grouped by 'name' and the name columns gets hidden. for this when the user clicks InvNo column (the invoice numbers/id numbers) , the children of groups gets sorted. this is the defual behavior.

but i want to acheive is when the user clicks InvNo column it should sort the name column so only group names gets sorted but not their children. How do i so this?

Something that i'd like to have: when user clicks on InvNo column it gives the user two options.

sort by group names (name column)
sort by children (InvNo)

thanks

How do i acheive this?

You use `groupField : ['name']` in `groupingView`. Thus by clicking on any column header jqGrid will sort the data by **two** criteria **automatically**: first by `name` to have the grouping by name and then, as the second criteria, by the clicked column (`id`) for example. You need just change `sortname: 'name'` to `sortname: 'id'` to see the results of sorting. If you have another results then you did probably something wrong. You should provide the demo, which reproduces the problem. I'd recommend you to use [free jqGrid](https://github.com/free-jqgrid/jqGrid) 4.13.4 instead of old 4.6. — Oleg, Oct 29 '16 at 09:32
@Oleg for the moment i have to stick with version 4.6 cannot move to new version i dont know what kind of changes to if im moving to new one. so i have to stick with the old one — NP Neil Footy, Oct 29 '16 at 09:54
You can continue to use 4.6 if you don't need and new features or you have no performance problems. You should understand, that you will have real problem only if you find some bug in jqGrid 4.6 or some compatibility issue with new jQuery, jQuery UI or new web browser. No fixes for jqGrid 4.6 will be posted. You can try to use jQuery UI 1.12.1 in you demo and to see the first problem. Thus you have to stay by all old versions of jQuery and jQuery UI. — Oleg, Oct 29 '16 at 10:14
More heavy problem you could have if new version of Chrome for example will be displayed in the wrong way in jqGrid 4.6. Such problem you will can't fix without moving to new jqGrid version. See [the old answer](http://stackoverflow.com/a/10621951/315935), which describes close problem which was previously. I recommend you to discuss the risk of the usage old jqGrid with the risk of migration to the latest free jqGrid with your managers. In any way I recommend you to test whether you get any compatibility problems with free jqGrid. I suppose that old code will just work, and even more quickly. — Oleg, Oct 29 '16 at 10:17
@Oleg thanks for the replies : ) for the time i will be using old one of course i will be moving to new. — NP Neil Footy, Oct 29 '16 at 10:22
You are welcome! Back to your original question. Is your problem with sorting are solved now? You can try the demo https://jsfiddle.net/OlegKi/mkgtuuzy/ (or https://jsfiddle.net/OlegKi/mkgtuuzy/1/) and to see that sorting by any column don't break the order by `name`. If you still hav any problem, then you can modify my demo and describe the test case (step by step instruction) which one can follow to reproduce the problem. — Oleg, Oct 29 '16 at 12:21
@Oleg could i get back to this tomorrow.... i have to leave my seat for today. — NP Neil Footy, Oct 29 '16 at 12:58

How do i sort grouped row header names when user clicks a column header [Trirand JqGrid 4.6]

0 Answers0