Can you use jqGrid within ASP.net using a webservice and javascript?

Question

The jqGrid has been kicking my butt (as well as others on this site). I can't seem to get the JSON data from the webservice to load into the jqGrid when using the addJSONData method.

Does anyone know if this is possible to do? I am not using MVC just a plain WebProject webservice in ASP.NET 3.5.

I am using the latest version of jqGrid 3.5.

I don't know what to do. I am currently trying to load just 1 row that I am returning a string in my WS like this:

"Page:1,Total:1,Records:1,Rows:[name: Jeff V title: Programmer]"

Which is then passed into my javascript as: {"d":"Page:1,Total:1,Records:1,Rows:[name: Jeff Vaccaro title: Programmer]"}

My jQuery code is the following:

    jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        datatype: processrequest,
        mtype: 'POST',
        colNames: ['Name', 'Title'],
        colModel: [
      { name: 'name', index: 'name', width: 55 },
      { name: 'title', index: 'title', width: 90 }
      ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/basic/images',
        caption: 'My first grid'
    });
});


function processrequest(postdata) {
    $(".loading").show();
    $.ajax({
        type: "POST",
        data: "{}",
        datatype: "clientside",
        url: "../webServices/myTestWS.asmx/testMethod",
        contentType: "application/json; charset-utf-8",
        complete: function (jsondata, stat) {
            if (stat == "success") {
                jQuery("#list")[0].addJSONData(eval("(" + jsondata.responseText + ")"));
                $(".loading").hide();
            } else {
                $(".loading").hide();
                alert("Error with AJAX callback");
            }
        }
    });
}

I've tried all sorts of different variations of the addJSONData code. Does anyone know if this is possible to do?

Any help is appreciated!

Thanks

Answer 1

First of all your web service should return a class instance with properties page, total, records, rows and so on. If web method has attribute [ScriptMethod (ResponseFormat = ResponseFormat.Json)] the class instance will be correct converted to the the JSON data.

You can use ajaxGridOptions: { contentType: 'application/json; charset=utf-8' } parameter and jsonReader (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data) to load data in the jqGrid. Information from http://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer/3061669#3061669 and http://stackoverflow.com/questions/3056182/best-way-to-change-jqgrid-rownum-from-all-to-1-before-pass-to-a-web-service/3057484#3057484 could be helpful for you.

At the end imgpath is no more supported in version 3.5 of jqGrid.