Question

I’m new to jQuery/jqGrid. I want to return json formatted data from the asmx web service and display the data in the jqGrid. The grid is rendering on the page but it contains no rows of data. I’m not sure if I’m returning the correct format that jqGrid is looking for. Or if I am missing something else.

(I’ve come across many questions on SO related to this topic so I apologize in advance if this has already been answered. At this point, even the number of different answers available is causing further confusion).

Web Service

 <System.Web.Script.Services.ScriptService()> _
    <WebService(Namespace:="http://tempuri.org/")> _
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
    Public Class WebService1
    Inherits System.Web.Services.WebService

    Public Class Person
        Public FirstName As String
        Public LastName As String
    End Class

    <WebMethod()>
    <ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetPersonList() As List(Of Person)

        Dim personList As New List(Of Person)

        'Connect to DB

        'While reading from DB       
            personList.Add(
                New Person() With {
                    .FirstName= dr("fname"),
                    .LastName = dr("lastName")
                })

        'Does personList need to be converted to a different format?
        Return personList

    End Function
    End Class

ASPX Page

jQuery("#list1").jqGrid({
            url: "http://localhost/WebService1.asmx/GetPersonList",
            datatype: "json",
            mtype: 'POST',
            colNames: ['FirstName', 'LastName'],
            colModel: [
            { name: 'FirstName', index: 'FirstName', width: 90 },
            { name: 'LastName', index: 'LastName', width: 90 }
            ],
            rowNum:10,
            rowList: [10,20,30],
            pager: '#pager1',
            viewrecords: true,
            caption: "Person List"
        });

Answer 1

EDIT: Use this. I’ve tested it using an ASMX service with no params that returns a List<Person>.

$("#list1").jqGrid({
    url: "http://localhost/WebService1.asmx/GetPersonList",
    datatype: "json",
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' 
    }, // ASMX wants request header to be application/json..
    serializeGridData: function (postdata) { 
        return null; 
    }, // ignores paging params - if not needed (else your service must define them)
    jsonReader: { // thanks Oleg for this tip on dealing with the ASMX data.d
        repeatitems: false,
        root: function (obj) { return obj.d; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.d.length; }
    },
    colNames: ['FirstName', 'LastName'],
    colModel: [
        { name: 'FirstName', index: 'FirstName', width: 90 },
        { name: 'LastName', index: 'LastName', width: 90 }
        ],
    rowNum: 10,
    rowList: [10, 20, 30],
    viewrecords: true,
    caption: "Person List"
});

Another helpful tip is to use something like Firebug to set a break point when your jqGrid is defined. You should also see in the Firebug console that a call was made to your web service and whether the response is coming back or not.

Another helpful tip is to wrap your JSON in a JsonResponse class with timestamp, status, message, result .. and any other fields you need (I only ever use those 4).

public class JsonResponse
{
    public object[] Result { get; set; }
    public string TimeStamp { get; set; }
    public string Status { get; set; }
    public string Message { get; set; }
}