Thursday, March 22, 2012

Jqgrid client side sorting

I have been searching how to sort Jqgrid in front end.

Someone was explaining it to make send a request to back-end,then sort it in database then return the result.
it doesn't make a sense to use grid framework then.

Finally, I have found it.
just add one more option "loadonce: true"

$(function(){ 
  $("#list").jqGrid({
    url:'Json Return URL',
    datatype: 'json',
    mtype: 'GET',
    colNames:['Model', 'Banner', 'Highlights'],
    colModel :[ 
      {name:'model', index:'model', width:120, key:true}, 
      {name:'banner', index:'banner', sorttype: 'number', align:'right', width:100}, 
      {name:'highLight', index:'highLight', sorttype: 'number', align:'right', width:100}],
    rowNum:20,
    height: 300,
    sortorder: 'desc',
    loadonce: true,
    viewrecords: true,
    gridview: true,
    jsonReader : {
  repeatitems: false,
  userdata: "userdata"
 }    
  }); 
}); 

that's it :)

FYI, when you set an attribute on colModel "sorttype: 'number'", it will sort as number.
if you don't, 2 will be top place when you sort it, even there is 11 or 10 so on..

1 comment:

  1. Even i am facing the same problem.
    And by using the "loadonce: true" option, the grid loads only the number of records we have set to option "rowNum", i.e 20.

    But, if the number of records in database are more than 20(say 35), then only the first 20 records are seen in the grid, also no pagination is available. To see the other records, i have to change the "rowList" option to more than 20, so that i can now see other records too.

    So, i want to override the server-side sorting call, and instead perform a custom client-side sorting.

    Please help me with this.

    Thanks in advance.

    ReplyDelete