jQuery Grid Plugin - jqGrid

tony said:

Hello,

The solution is a little tricky.

1. Set your default datatype to json or xml.

2. define loadComplete event like this

loadComplete: function () {

$("#mygrid").setGridParam({datatype:'local'});

}

3. define onPaging event like thiss

onPaging : function(which_button) {

$("#mygrid").setGridParam({datatype:'json'});

}

Enjoy!

Do not forget to set sorttype in colModel in order to sort work correct

Regards

Tony

Thanks, this works for me!

I tried that but it's not working. 4.2.0

The paging works but when I try to sort a field it blanks out the entire grid.

$(document).ready(function(){
      $("#mygrid").jqGrid({
        url:'http://localhost/data',
        datatype: 'json',
        mtype: 'GET',
        colNames:['ID', 'User'],
        colModel :[ 
            {name:'id', jsonmap: 'cell.id', sorttype:'int'},
            {name:'user', jsonmap: 'cell.user', sorttype:'text'},            
        ],
        jsonReader: { repeatitems: false },
        pager: '#mypager',
        viewrecords: true,
        rowNum:30,
        rowList:[30,100,1000],
        gridview: true,
        viewrecords: true,
        sortable:true,        
        sortorder: 'desc',        
        height: "100%",
        scrollOffset:0,  
        onSelectRow: function(id){ 
         },          
        altRows     : true,
        altclass    : 'oddRow',
        gridComplete: function() {
            $(".jqgrow:odd").hover(
                function() { $(this).removeClass("oddRow");}, 
                function(event) { $(this).addClass("oddRow");}
            );
        }, 
        onPaging: function() {
            $("#mygrid").setGridParam({datatype:'json'});
            $("#mygrid").trigger("reloadGrid");
            },               
        loadComplete: function () {        	
        	$("#mygrid").setGridParam({datatype:'local'});
        	$("#mygrid").trigger("reloadGrid");
        	}, 	
      }); 
      
      $('#mygrid').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: false });
    });

I did this exactly and the paging works but when I try to do the search or the sorting by column field the entire data in the grid dissapears!

loadComplete/onPaging solution does not seem to work with jqGrid 4.1.2.

Looking at the code, in case of 'datatype: json' (or xml and maybe others), no data is stored on the client side (in ts.p.data) unless 'loadonce: true' is specified. But if you specify 'loadonce: true', paging is disabled.

The 2 scenarios:

datatype: json, loadonce: false

• paging works (serverside)
• sorting does not work (after doing sort, grid is empty)

datatype: json, loadonce: true

• paging is disabled
• sorting works (clientside)

Erik

Hi,

Same thing happens with gridComplete.

When you click on sort column, it will eventually call populate(). populate() will call addLocalData() (since datatype is changed to 'local' in gridComplete). However, addLocalData() will return empty result set as ts.p.data is empty and subsequent call to addJSONData() will result in empty grid.

Even forcing population of ts.p.data in addJSONData() will not work - addLocalData() will change number of pages/records to that of ts.p.data array and that will disable paging - ts.p.data will have only one page of data as paging is on server side.

Erik