Why is it that I cannot sort my grid in jqgrid eve

Question

I was really confused that my program using jqgrid won't sort (descending) everytime I clicked the column header? I tried creating a program where I use local data (.json data) and it work great in sorting when I clicked the column header. So what's the problem with the first one? I am using the data from client server....

Here's my javascript code:

  $("#btnQueryMainAccountGroups").click( function() {
    var params = {
      "SessionID": $("#eSessionID3").val(),
      "dataType": "data"
    }
    $('#tblData').setGridParam({
      url:'process.php?path=' + encodeURI('masterData/data') + '&json=' + encodeURI(JSON.stringify(params)), 
      datatype: olSettings.ajaxDataType,  
    });
    $('#tblData').trigger('reloadGrid');
    }); 

    $("#tblData").jqGrid({
    url: '',
    datatype: '',
    jsonReader : {
      root: function(obj) {
        var root = [];

    if  ('error' in obj) 
    {
      showMessage(obj.error['class'] + ' error: ' + obj['error']['msg']);
    }
    else
    {
      $.each(obj['result']['main']['rowdata'], function(rowIndex, rowDataValue) {
        var row = {};
        $.each(rowDataValue, function(columnIndex, rowArrayValue) {
          var fldName = obj['result']['main']['metadata']['fields'][columnIndex].name;
          row[fldName] = rowArrayValue;                
        });
        root[rowIndex] = row;
      });
    };
    return root;
  },
  page: "result.main.page",
  total: "result.main.pageCount",
  records: "result.main.rows",
  repeatitems: false,
  id: "0"
},
serializeGridData: function(postData) {
  var jsonParams = {
    'SessionID': $('#eSessionID3').val(),
    'dataType': 'data',
    'recordLimit': postData.rows,
    'recordOffset': postData.rows * (postData.page - 1),
    'rowDataAsObjects': false,
    'queryRowCount': true,
    'sort_fields': postData.sidx
  };

  return 'json=' + JSON.stringify(jsonParams);
},

},
colNames:['ID','Code', 'Description','Type'],
colModel:[
  {name:'group_id'},
  {name:'group_code',align:'center',width:100},
  {name:'group_desc'},
  {name:'type'}
],

viewrecords: true,
rowList:[5,10,50,100],
pager: '#tblDataPager',
sortname: 'group_desc',
sortorder: 'asc',
rowNum:5,
loadonce:false,
caption: "MainGroup"
});

$("#tblData").setGridWidth($(window).width() - 70);
$("#tblData").jqGrid('sortableRows');

that's my code in javascript where i can't sort my jqgrid... my process.php code:

 <?php 
     print(file_get_contents("http://localhost/" .... "?json=" . $_GET["json"]));
 ?>

There's no problem in loading of data to the jqgrid. The only problem is that I cannot sort them in descending order. Everytime i clicked a column header, it only sorts ascending, and if i clicked again, no descending happen. What's the problem?

Answer 1

You should use sortable: true in your required fields' colModel as follows:

colModel:[
 {name:'group_id', sortable: true},
 {name:'group_code',align:'center',width:100, sortable: true},
 {name:'group_desc', sortable: true},
 {name:'type', sortable: true}
],

You should now able to sort properly.

Answer 2

Try using loadonce:true;, You are using loadonce:false.

It says in here,

If this flag is set to true, the grid loads the data from the server only once (using the appropriate datatype). After the first request, the datatype parameter is automatically changed to local and all further manipulations are done on the client side. The functions of the pager (if present) are disabled.

Answer 3

When using data from server, you must provide ready-to-use data: both ordered and paginated.

To do so, jqgrid sends in the request the variables sidx and sord , containing the name of the column and the ordering ('desc' for descending).

See the tutorial for further help and a PHP example.