Jqgrid default sorting doesn't work in Chrome

Question

In Firefox & IE, the listing display as expected and default sorting is fine. And No. column displaying from 1,2,3... in ascending order

But the problem is in Chrome and displaying not in order (Please see my below screenshot)

Below is my code and I also tried firstsortorder:'asc' of relevant column model named lineNo, but it doesn't work.

In fact, it is about 100 records in total.

jQuery.post(jqDataUrl, data, function(response) {
  if(response != null) {
    jQuery("#jqTable").jqGrid("GridUnload");
    jQuery("#jqTable").jqGrid({
      data: response.rowdata,
      datatype: "local",
      colNames:
      [
        "",
        "",
        "",
        "<spring:message code = "patron.transaction.number" />",
        "<spring:message code = "sales.pdtType" />",
        "<spring:message code = "sales.pdtDetails" />",
        "<spring:message code = "patron.transaction.ticketID" />",
        "<spring:message code = "sales.priceCat" />" ,
        "<spring:message code = "sales.priceClass" />",
        "<spring:message code = "sales.unitPrice" />",
        "<spring:message code = "sales.ticketType" />",
        "<spring:message code = "sales.dateFulfilled" />",
        "<spring:message code = "sales.lastStatus" />",
        "<spring:message code = "patron.transaction.lastUpdated" />",
        "<spring:message code = "generic.jqgrid.action" />"
      ],
      colModel:
      [
        { name: "txnID", index: "txnID", width: 50,hidden:true, editable: true, align: "left" ,search:false,sortable:false},
        { name: "isReturned", index: "isReturned", width: 50,hidden:true, align: "left",title:false,search:false,sortable:false},
        { name: "description", index: "description", width: 50, align: "left",title:false,search:false,sortable:false},
        { name: "lineNo", index: "lineNo", width: 50, align: "left",title:false,search:false,sortable:false},
        { name: "pdtType", index: "pdtType", width: 100, align: "left",title:false,search:false,sortable:false},
        { name: "pdtDetails", index: "pdtDetails", width: 100, align: "left",title:false,search:false,sortable:false},
        { name: "ticketID", index: "ticketID", width: 100,key:true, align: "left",title:false,search:false,sortable:false},
        { name: "priceCat", index: "priceCat", width: 100, align: "left",title:false,search:false,sortable:false},
        { name: "priceClass", index: "priceClass", width: 100, align: "left",title:false,search:false,sortable:false},
        { name: "unitPrice", index: "unitPrice", width: 100, align: "left",title:false,search:false,sortable:false,
          formatter:function (cellvalue, options, rowObject) {
             if(cellvalue == null || cellvalue == "") {
               return "";
             } else {
                 return "${userCurrency}"+parseFloat(cellvalue).toFixed(2);
             }
          }
        },
        { name: "ticketType", index: "ticketType", width: 80, align: "left",title:false,search:false,sortable:false},
        { name: "dateFulFilled", index: "dateFulFilled", width: 80, align: "left",title:false,search:false,sortable:false},
        { name: "lastStatus", index: "lastStatus", width: 80, align: "left",title:false,search:false,sortable:false},
        { name: "lastUpdated", index: "lastUpdated", width: 80, align: "left",title:false,search:false,sortable:false},
        { name: 'action', index: 'action', width: 50, align: "center", sortable: false, search:false}
      ],
      autowidth: true,
      height: 'auto',
      grouping: true,
      groupingView : {
        groupField : ['description'],
        groupColumnShow : [false, false],
        groupText : ["<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>"],
        groupCollapse : false,
        groupOrder: ['asc', 'asc'],
      },
      pager: jQuery("#jqTablePager"),
      //rowNum: 10,
      rowList: [10, 20, 30],
      cmTemplate: { title: false },
      emptyrecords:"<spring:message code = 'generic.jqgrid.nosearchresults'/>",
      jsonReader : {root: "rowdata", page: "page", total: "total", records: "records", repeatitems: false, id: "ticketID"},
      gridComplete: function() {
        var grid = jQuery("#jqTable");
        var ids = grid.jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
          var row = ids[i];
          var isReturned = grid.getCell(row, 'isReturned');
          if(isReturned=='true'){
              document.getElementById(row).style.backgroundColor='orange';
          }
          var button = "<img class='icons' title='View Fee Details' src='<c:url value='/resources/img/view.png' />' onclick='viewFeeDetailPopup(" + row + ")'/> <img class='icons' title='View Ticket History' src='<c:url value='/resources/img/lookup2.png' />' onclick='viewTicketHistoryPopup(" + row + ")'/>";
          grid.jqGrid('setRowData', row, {action: button});
        }
      }
    });
  } else {
    jQuery('#statusMsg').html("<fmt:message key="generic.jqgrid.noresponse"/>");
  }
});

Any help is appreciated and many thanks!!!

Answer 1

I suppose you need add sortname: "lineNo" option to your grid to fix your main problem.

Your current code have some other small problems and can be improved. Below I include the list of some small (or not so small) suggestions.

First of all you need follow the options used in Limitations of grouping and add gridview: true option in the grid. If you uses the current version of jqGrid it fix the problem internally, but I recommend you do add the option explicitly.

You should remove jsonReader option because it will be ignored in case of datatype: "local". If it's really required one can use localReader instead (see the documentation).

You make grouping by one column description (see groupField in groupingView). So all other array parameters of groupingView should have one element too. Currently you use groupColumnShow and groupOrder with two elements and groupText with 11 (!!!) elements.

You can remove columns with hidden:true property (txnID, isReturned) from the grid. The input data of local grid still hold all properties. So you can use var item = $("#jqTable").jqGrid("getLocalRow", rowid) and the item contains all properties, for example, item.isReturned. getLocalRow is much more effective as getCell which you use currently.

You modify background-color of some rows inside of gridComplete. It's ineffective (works slowly). Much more effective will be to use rowattr to set the required style during creating the grid. See the answer and this one. By the way I would recommend you to use loadComplete instead of gridComplete if you need it. See the answer.

You should use pager: "#jqTablePager" instead of pager: jQuery("#jqTablePager"). Because the common error the code of jqGrid was changed some day. Now if the value of pager is jQuery wrapper (like jQuery("#jqTablePager")) jqGrid just normalize it to the selector. It get id of the element and fix pager: jQuery("#jqTablePager") to pager: "#jqTablePager". But why you need first search DOM elements of the page by id and find DOM with id="jqTablePager" create jQuery wrapper to the DOM element (jQuery("#jqTablePager"))? It's absolutely unneeded work. You should know this and just use always pager in form of id selector: "#jqTablePager".

Usage of setRowData in the loop to change action column of every row of the grid is slowly. Every changing of one element of the grid follows to reflow of all elements of the page. See the answer and the article for more details. Much more effective is to create the correct content of the action cell directly by usage of custom formatter. The simplest implementation which is very close to your current one will be the following

{ name: 'action', width: 50, align: "center", sortable: false, search: false,
    formatter: function (cellvalue, options) {
        return "<img class='icons' title='View Fee Details' src='<c:url value='/resources/img/view.png' />' onclick='viewFeeDetailPopup(" +
            options.rowId + ")'/> <img class='icons' title='View Ticket History' src='<c:url value='/resources/img/lookup2.png' />' onclick='viewTicketHistoryPopup(" +
            options.rowId + ")'/>";
    }}

The rowId property of options parameter provides you required information. If required you can use third rowObject parameter of custom formatter to access all other properties of the row item.

By the way you can consider to remove onclick from the above images added in action column and using beforeSelectRow callback instead. See the answer. You can easy modify the code to distinguish two different img inside of the column. e.target is the clicked element. The $(e.target).attr("title") for example will be "View Fee Details" in case of clicking on the first img and it will be View Ticket History on clicking on the second one.

The last remark. I would recommend you to reduce colModel which you use. You should remove all index properties and all properties with default values like align: "left". You can include more common properties in cmTemplate. Using cmTemplate: {title: false, search: false, sortable: false} you can reduce the code and makes it more readable. The column definition

{ name: "priceCat", index: "priceCat", width: 100, align: "left",
    title: false, search: false, sortable: false}

for example will be reduced to

{ name: "priceCat", width: 100 }

The code will be smaller, more quickly loaded, more easy read, easy to maintain.