0

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"
        });
DisplayName
  • 3,093
  • 5
  • 35
  • 42
user1620141
  • 315
  • 1
  • 2
  • 16

2 Answers2

2

It's important to understand that jqGrid send to "http://localhost/WebService1.asmx/GetPersonList" additional parameters. jqGrid is oriented that the server implements paging of data. So it will shows only 10 rows of data (see rowNum:10) and the starting page choose the user. So it would be better to change the server code to support the paging. (see the answer for an code example)

Alternatively you can use loadonce: true option of jqGrid. In the case jqGrid will implement client side paging and the server can returns all data like you currently do. Nevertheless you will have to add some more parameters to make the grid working. It's important to know, that ASMX service returns all data inside of d property. So you have to use jsonReader which describe how jqGrid can read the data returned from the server. It could be something like

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj.d; },
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) { return obj.d.length; }
}

(see the answer as an example).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
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; }
}
Scotty.NET
  • 12,533
  • 4
  • 42
  • 51