jqgrid setGridParam datatype:local

Question

I don't want to hit the server and bring back every row when I am paging through the records by using the pager. I read that if I set the datatype = local in the complete blog in the .ajax function AND if I set loadonce:true then I should be able to avoid having to wait for the grid to reload with the data.

However, when I do these things the grid doesn't go to the next page. It just hangs...
What am I doing wrong?

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        datatype: processrequest,
        mtype: 'POST',  
        jsonReader: {  
            root: "rows", //arry containing actual data  
            page: "page", //current page  
            total: "total", //total pages for the query  
            records: "records", //total number of records  
            repeatitems: false,  
            id: "ID" //index of the column with the PK in it   
        },
        colNames: ['Name', 'Title'],
        colModel: [
      { name: 'name', index: 'name', width: 250 },
      { name: 'title', index: 'title', width: 250 }
      ],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortorder: "desc",
        viewrecords: true,
        height: '250px',
        caption: 'My first grid',
        loadonce: true
    }).navGrid('#pager', {edit: false, add: false, del: false});
});

function processrequest(postdata) {
...
$.ajax({
...
    complete: function (jsondata, stat) {
        if (stat == "success") {
            var thegrid = jQuery("#list2")[0];
            var jsonObject = (eval("(" + jsondata.responseText + ")"));
            thegrid.addJSONData(jsonObject.d);
            $(".loading").hide();
        } else {
            $(".loading").hide();
            alert("Error with AJAX callback");
        }
        $("#list").setGridParam({ datatype: 'local' });
    }
});
}

Solution 1

There are some misunderstandings. If you use datatype: local then you have to fill jqGrid yourself with methods like addRowData or set the data in once with data parameter (for jqGrid version 3.7 and higher). So the usage of datatype: local follows to jqGrid don't load any data itself and your datatype: processrequest parameter will be ignored.

If you want to use loadonce: true parameter which is supported since version 3.7 of jqGrid, you should have all parameters of jqGrid for JSON or XML (for example datatype: json in your case) and an additional parameter loadonce: true. Then after the first load of data jqGrid will switch the datatype to datatype: local and after that it will work independent on server but ignore some parameters (like datatype: processrequest in your case).

One more small remark. The most properties of jsonReader which you use in your example are default (see this wiki). The parameters which you use will be combined with the default properties, so it is enough to use parameter like jsonReader: { repeatitems: false, id: "ID"}

UPDATED: OK Jeff. It seems to me, to solve your problem you need some more code examples from both sides: client and server. Here is a small example which I created and tested for you.

First of all the server side. In the ASMX web service we define a web method which generate a test data for your table:

public JqGridData TestMethod() {
    int count = 200;
    List<TableRow> gridRows = new List<TableRow> (count);
    for (int i = 0; i < count; i++) {
        gridRows.Add (new TableRow () {
            id = i,
            cell = new List<string> (2) {
                string.Format("Name{0}", i), 
                string.Format("Title{0}", i)
            }
        });
    }

    return new JqGridData() {
        total = 1,
        page = 1,
        records = gridRows.Count,
        rows = gridRows
    };
}

where classes JqGridData and TableRow are defined like following:

public class TableRow {
    public int id { get; set; }
    public List<string> cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<TableRow> rows { get; set; }
}

Here you can see, the web method TestMethod has no parameters and posts back the full data. Paging, sorting and searching of data will be done by jqGrid (version 3.7 or higher).

To read such data and put into jqGrid we can do following:

$("#list").jqGrid({
    url: './MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    loadonce: true,
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: function (obj) { return obj.d.rows; },
        page: function (obj) { return obj.d.page; },
        total: function (obj) { return obj.d.total; },
        records: function (obj) { return obj.d.records; }
    },
    colModel: [
        { name: 'name', label: 'Name', width: 250 },
        { name: 'title', label: 'Title', width: 250 }
    ],
    rowNum: 10,
    rowList: [10, 20, 300],
    sortname: 'name',
    sortorder: "asc",
    pager: "#pager",
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    height: 250,
    caption: 'My first grid'
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true},
    {},{},{},{multipleSearch : true});

Some comments about the definition of jqGrid:

To communicate with ASMX web service through JSON one needs to do the following in the corresponding jQuery.ajax request:

• dataType: 'json' must be set.
• contentType:'application/json; charset=utf-8' must be set.
• the data sending to the server must be JSON encoded.

To do all these I use datatype, ajaxGridOptions and serializeGridData parameters of jqGrid. I do JSON encoding with JSON.stringify function (the corresponding JavaScript can be downloaded from here).

Then the received data must be decoded. I do this with my favorite feature of jqGrid - jsonReader with functions (see this SO post and this wiki).

At the end we use loadonce: true which change the datatype of jqGrid from 'json' to 'local' and we can use immediately all advantage of local paging, sorting and advanced searching existing since jqGrid version 3.7.

If you do want make server side paging, sorting and searching (or advanced searching) with ASMX web service it is also possible. To save a little place here and to separate code examples I will post the corresponding example in your other question jqgrid Page 1 of x pager (see UPDATED part).

Solution 2

It's a little bit late, but here's a (the?) super-easy solution for any future solution-seekers:

gridComplete: function(){ 
  $("#yourGridID").setGridParam({datatype: 'local'}); 
}

That's it. I'm using 3.7.2, can't speak for any other versions. The problem (apparently) stems from 'loadonce' only working with the pre-defined datatype values, which a function is not. I believe the other built-in values will also work, but 'local' makes sense.

Comments

[webdad3]

I updated my jsonReader statement as you suggested and I removed the setGridParam line. I kept the loadonce value but I'm still seeing that it goes back to the server each time. It doesn't seem to be working. Any further suggestions?