jqGrid grouping doesn't work in chrome for multiple column

Question

I am using jqgrid in my application. I from the json data set in my jsp page (its local). I want to my data set to be group by year and month. For sort by month I have used a field monthno (numeric) to avoid alphabetic sorting. It works perfectly in firefox but not in chrome. The screenshot of chrome browser is attached. I am using jqGrid version 5.0.0 .Here is my code for the grid

$("#doctorChart").jqGrid({ 
   data: mydata, 
   datatype: "local", 
   height: 'auto',
   width: 'auto', 
   pager: '#psingle',
   rowNum: 60,  
   //sortable :true,           
   //to hide pager buttons
   pgbuttons:false,
   recordtext:'',
   pgtext:'',    


  colNames:['Year', 'Month', 'Doctor Name','Pharmacy<br>Revenue', 'Diagnostic<br>Revenue', 'OP Revenue', 'IP Revenue', 'Package<br>Revenue', 'Total<br>Revenue'],
  colModel:[ {name:'year',index:'year', width:80, sorttype:"int",sortable:false}, 
             {name:'month',index:'month', width:80,sorttype:function(cell){ return cell.monthno}},
             {name:'doctorname',index:'doctorname',width:165,sortable:false},          
             {name:'pharmacyRevenue',index:'pharmacyRevenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'},    
             {name:'diagonasticRevenue',index:'diagonasticRevenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'},
             {name:'opRevenue',index:'opRevenue', width:100, align:"right",sorttype:"float",formatter:"number", summaryType:'sum'},
             {name:'ipRevenue',index:'ipRevenue', width:100, align:"right",sorttype:"float",formatter:"number", summaryType:'sum'},
             {name:'packgRevenue',index:'packgRevenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'},                 
             {name:'revenue',index:'revenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'} ], 


   sortname: ['year','month','doctorname'], 
   viewrecords: true, 
   sortorder: "asc", 
   grouping: true, 
   grouping: true, 
   groupingView : { 
        groupField : ['year','month'], 
        groupSummary : [false, false], 
        groupColumnShow : [true, true], 
        groupText: [ // user the name of a column with curly braces to use it in a summary expression. 
                    // {0} is the formula placeholder for the column (defined by the summaryType property
                   "<b>{0}</b>" , 

                    "<div style='float:left;'>Month: <b>{0}</b></div>"+
                    "<div style='float:right; width: 65%; text-align:right;'><div style='width:100px; font-weight:bold; float:left; text-align:right;'>{pharmacyRevenue}</div>"+
                        "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{diagonasticRevenue}</div>"+
                        "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{opRevenue}</div>"+
                        "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{ipRevenue}</div>"+
                        "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{packgRevenue}</div>"+
                        "<div style='width:100px; float:right; text-align:right;'><label>Total: </label> <b>{revenue}</b></div>"+                               
                    "</div>"


       ], 
        groupCollapse : true, 
        groupOrder: ['asc','asc'],
        groupDataSorted : true,
        groupSummaryPos: ['header']
   },
   footerrow: true, 
   userDataOnFooter: true,
   loadComplete: function () {
    var reportSum = jQuery("#doctorChart").jqGrid('getCol', 'revenue', false, 'sum');


            var pharmacySum = jQuery("#doctorChart").jqGrid('getCol', 'pharmacyRevenue', false, 'sum'); 
            var diagonasticSum = jQuery("#doctorChart").jqGrid('getCol', 'diagonasticRevenue', false, 'sum');   
            var opSum = jQuery("#doctorChart").jqGrid('getCol', 'opRevenue', false, 'sum'); 
            var ipSum = jQuery("#doctorChart").jqGrid('getCol', 'ipRevenue', false, 'sum'); 
            var packgSum = jQuery("#doctorChart").jqGrid('getCol', 'packgRevenue', false, 'sum');   


        jQuery("#doctorChart").jqGrid('footerData', 'set', 
        { 
            month: 'Grand Total:',
            revenue: reportSum ,

            pharmacyRevenue : pharmacySum,
            diagonasticRevenue : diagonasticSum,
            opRevenue : opSum,
            ipRevenue : ipSum,
            packgRevenue : packgSum

        });
    }

});

My data set looks like

var mydata = [

               {
                  year:"2015",
                  month:"April",
                  doctorname:"Ben Pomeroy",
                  revenue:"29012.0",                      
                  monthno: 4,                      

                  pharmacyRevenue:"5906.0",
                  diagonasticRevenue:"0.0",
                  opRevenue:"4119.0",
                  ipRevenue:"11351.0",                    
                  packgRevenue: "7636.0"

              } ,

               {
                  year:"2015",
                  month:"April",
                  doctorname:"Kerry Hall",
                  revenue:"35396.0",                      
                  monthno: 4,                      

                  pharmacyRevenue:"6705.0",
                  diagonasticRevenue:"1959.0",
                  opRevenue:"7384.0",
                  ipRevenue:"6837.0",                     
                  packgRevenue: "12511.0"

              } ,

               {
                  year:"2015",
                  month:"April",
                  doctorname:"Maarten Schuth",
                  revenue:"29122.0",                      
                  monthno: 4,                      

                  pharmacyRevenue:"4850.0",
                  diagonasticRevenue:"1794.0",
                  opRevenue:"7119.0",
                  ipRevenue:"3316.0",                     
                  packgRevenue: "12043.0"

              } ,

score 0 · Accepted Answer · answered Aug 26 '15 at 08:15

0

I don't know the changes in jqGrid 5.0.0 because I develop alternative fork free jqGrid (the current version is 4.9.2). Nevertheless I suppose that sortname: ['year','month','doctorname'] option is wrong. The value should be the string. I suppose that what you want more corresponds to the option sortname: 'doctorname'.

The reason of your main problem seems me the following. You should fix the definition of month column from

{ name: 'month', index: 'month', width: 80,
    sorttype: function (cell) {
        return cell.monthno
    }
},

to

{ name: 'month', width: 80,
    sorttype: function (cell, item) {
        return item.monthno;
    }
},

answered Aug 26 '15 at 08:15

Oleg

220,925
34
403
798

Thanks it works. But when I change the group by column other way it messed up. – Tuhin Subhra Dey Aug 26 '15 at 10:04
@TuhinSubhraDey: You are welcome! Sorry, but I don't understand what you mean in your previous comment. What you changed? What you expect and what you see instead? – Oleg Aug 26 '15 at 10:07
I used the above dataset and tried group by groupField : ['doctorname','year'] and my sortname: 'doctorname', but it didn't sort monthwise. – Tuhin Subhra Dey Aug 26 '15 at 11:36
@TuhinSubhraDey: the last options don't have any reference to `'month'` column. Why jqGrid should group or sort by month in the case? I'm not sure what you need. The example with `groupingView : {..., groupField : ['year','month'], ...}, sortname: 'doctorname'` or with `groupingView : {..., groupField : ['doctorname', 'year'], ...}, sortname: 'month'` could have sense, but not `groupingView : {..., groupField : ['doctorname', 'year'], ...}, sortname: 'doctorname'`. During grouping jqGrid have to sort first by columns from groupField and it can use **another filed** for sorting inside of group. – Oleg Aug 26 '15 at 12:03
Actually I want both. User can change the group by column dynamically. – Tuhin Subhra Dey Aug 26 '15 at 12:17
@TuhinSubhraDey: Sorry, but I can't follow you. Have you implemented dynamical grouping already or you need to implement it, but you can't? In your previous comment you wrote that you used *the same* sorting and grouping. Now you write about absolutely new requirement. – Oleg Aug 26 '15 at 12:44
Yes I have added two buttons and wrote my custom jquery code for that. But thank you for your reply. I have figured out my mistake. Can you tell me is this possible to export data in csv or pdf as I see on my screen as expanded on some row ? – Tuhin Subhra Dey Aug 26 '15 at 12:56
There are many ways to export the data, but it's all not functionality of jqGrid. Typically one have the data **on the server side**. So *the server* should export the data. jaGrid is pure JavaScript solution which works inside of web browser *on the client side*. So it seems to me wrong way for exporting data. I personally use ASP.NET. [The answer](http://stackoverflow.com/a/9349688/315935) and [another one](http://stackoverflow.com/a/13957161/315935) shows how I export the data to Excel (XLSX file). I add custom button to grid navigator all looks for the user like exporting from jqGrid. – Oleg Aug 26 '15 at 13:04

jqGrid grouping doesn't work in chrome for multiple column

1 Answers1