Client side sorting jqgrid desc / asc

Question

Client side sorting jqgrid desc / asc

I have seen many different variations of this problem, and I tried to use all the knowledge, but still no luck.

My dates are sorted from old to new and I want to sort them in the old way.

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

When I try to search it, it seems to trigger a reload and the sort is correct, new to old.

Best solution to set reboot within 1 second and cleanup interval? Or is there something else wrong with me?

I cannot sort the server side, this is 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");
;

+2

jqgrid

shef 03 dec. 12 at 5:03

source to share

1 answer

Oleg · Accepted Answer · 2012-12-03T08:39:57+0000

The exact source of the problem is not clear from the code you posted. You are using sortname: 'tran_date', sortorder: 'desc'

in the posted code but colModel

does not have a named column 'tran_date'

.

In general, it is important to understand that the server-side code url: "/cc/transaction/show/"+accountId

must return sorted data. Parameters sortname: 'tran_date', sortorder: 'desc'

will be used to create parameter values sidx

and sord

that will be sent to the server. Thus, the server should return data sorted in sidx

unsing order sord

. I suppose your current server code doesn't do this.

UPDATE . The server should return sorted data. If this is really not possible, then you need to resort to the data immediately after the first load. To do this, you can check inside the callback loadComplete

if you are loading data for the first time. On first load, the value datatype

is the original value, "json"

or "xml"

depending on the format of the data returned from the server. datatype

Will later be changed to "local"

. Therefore, if the parameter value is datatype

not "local"

, you can call "reloadGrid"

. The relevant code may look 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
});

Client side sorting jqgrid desc / asc

More articles: