jqgrid client side sorting desc/asc

Question

I have seen the many many variations on this issue, and I've tried to use all the knowledge, but still no luck.

My dates are sorting old to new, and I want to sort them new to old.

Where you see desc, I've tried asc, but no change.

When I try the paging, it seems to trigger the reload, and the sort is right, from new to old.

Is the best solution to set a reload for 1 second, and clear interval? Or do I have something else wrong?

I can't sort server side, it's just not an option.

    $("#transactionList").jqGrid({
       url: "/cc/transaction/show/"+accountId,
       datatype: "local",
       autowidth: true,
       height: 'auto',
       sortname: 'tran_date',
       sortorder: 'desc',
       sortable:true,
       loadonce:true,
       viewrecords: true,
       gridview: true,
       firstsortorder: 'desc',
       colNames:['Date','Asset Name','Description','Amount','Actions'],
       colModel:[
 {name:'tran_date',index:'tran_date',sorttype:'date',sortable:true,formatter:'date',firstsororder: 'desc',datefmt: 'M d,Y',formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'M d,Y'}},
{name:'assname',index:'assname',sortable:true,resizable:false},
{name:'desccription',index:'desccription',sortable:true,resizable:false},
{name:'net_proc', index:'net_proc',align:'right',formatter:'currency',formatoptions{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$", defaultValue:'0.00'}, sortable:true,resizable:false},   {name:'ID',index:'ID',formatter:actionsFormatter,width:130,align:"center",key:true,resizable:false}
      ],
      caption: "Completed Transactions",
      rowTotal: -1,
      rowNum: 1000,
      rowList: [10,20,30],
      pager: '#pager',
      onSelectRow: function(row_id) {
      },
      jsonReader: {
          repeatitems: false,
          id: "ID",
          userdata: 'rows'
      },
      viewrecords: true,
      gridComplete: function() {
      //Attach action event handlers
      $('span[name="details"]').click(function() {
      var row_id = this.id;
      var data = $("#transactionList").getGridParam('userData');
      var rowData;

      $.each(data, function(index,el){
        if(el.ID==row_id)
            rowData = el;
        });

      var message = '<div class="sectionItem"><span class="label">Asset Name:&nbsp;&nbsp;</span><span class="value">'+rowData.assname+rowData.assname2+'</span></div>';
      message += '<div class="sectionItem"><span class="label">Amount:&nbsp;&nbsp;</span><span class="value">'+rowData.net_proc+'</span></div>';
      message += '<div class="sectionItem"><span class="label">Transaction Date:&nbsp;&nbsp;</span><span class="value">'+rowData.tran_date+'</span></div>';
      $.popMessage('Transactions Details', message);
      }).addToolTip('Details');
    }
})
    $("#transactionList").setGridParam({datatype: 'json'}).trigger("reloadGrid");
;

Answer 1

The exact origin of the problem is not clear from the code which you posted. You use sortname: 'tran_date', sortorder: 'desc' in the code posted, but the colModel has no column with the name 'tran_date'.

In general it's important to understand, that the server code url: "/cc/transaction/show/"+accountId have to return sorted data. The options sortname: 'tran_date', sortorder: 'desc' will be used to build the values of sidx and sord parameters which will be send to the server. So the server have to return the data sorted by sidx unsing sord order. I suppose that your current server code don't do this.

UPDATE: The server should returns sorted data. If it's really impossible you have to resort the data directly after the first loading. To do this you can test inside of loadComplete callback whether you are loading the data at the first time. On the first loading the value of datatype is the original value "json" or "xml" depend on the format of the data returned from the server. Later datatype will be changed to "local". So if the value of datatype option is not "local" you can trigger "reloadGrid". The corresponding code could looks like below

$("#transactionList").jqGrid({
    url: "/cc/transaction/show/" + accountId,
    datatype: "json",
    rowNum: 1, // initial small value
    loadonce: true,
    loadComplete: function () {
        var $this = $(this);
        if ($this.jqGrid("getGridParam", "datatype") !== "local") {
            setTimeout(function () {
                $this.jqGrid("setGridParam", { rowNum: 20 }); // the real value
                $this.trigger("reloadGrid");
            }, 50);
        }
    },
    ... // other options which you need
});