jqGrid keeps on displaying "Loading"

Question

I am using a asmx service to return data to display in jqGrid. I can see the json data is returned in complete callback. This is what json data in the complete callback look like {"d":[{"__type":"HHSC.CTF.Business.BatchReceiptModel","BReceiptId"..... I am not sure why it preceded by d: and also the type name for the data. This is my jqGrid setup look like

$("#list").jqGrid({
    url: "../../WebServices/BatchReceiptsWebService.asmx/BatchReceiptsTable",
    datatype: "json",
    mtype: 'POST',   
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8',
        success: function (data, status) {

        },
        complete: function (xhr) {

        },
        error: function (jqXHR, textStatus, errorThrown) {

        }
    },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: {
        repeatitems: false,
        id: "BReceiptId",
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        root: function (obj) { return obj; },
        records: function (obj) {
            return obj.d.length; 
        }
    },
    colNames: ['BReceiptId', 'ReceiptNumber', 'ReceiptAmount'],
    colModel: [
                    { name: 'BReceiptId', index: 'BReceiptIdnId', width: 100 },
                    { name: 'ReceiptNumber', index: 'ReceiptNumber', width: 150 },
                    { name: 'ReceiptAmount', index: 'ReceiptAmount', align: 'right', width: 100 }
                ],
    rowNum: 10,
    loadonce: true,
    gridview: true,
    rownumbers: true,
    rowList: [10, 20, 30],
    viewrecords: true

});

score 2 · Accepted Answer · answered Aug 21 '13 at 07:34

2

You can't overwrite success and error callbacks of jQuery.ajax by usage the corresponding properties in ajaxGridOptions. If you examine the source code of jqGrid you will see that jqGrid uses the callbackes. Inside success callbacks jqGrid process the server response and fill the grid, then it hide "Loading..." div. By defining success and error callbacks inside ajaxGridOptions you beak Ajax processing used by jqGrid.

answered Aug 21 '13 at 07:34

Oleg

220,925
34
403
798

Thank you so much Oleg and kmk. The grid displays the data now. My next task is to pass parameters to the service from the grid. Have had troubles with that, but I am going to try for sometime before asking for help :) – Gomti Mehta Aug 21 '13 at 13:47
@GomtiMehta: You are welcome! jqGrid send some parameters to the server per default. If you need send additional data you can use `postData` parameter defined as object. I recommend you to define properties of `postData` parameter as functions. See [the answer](http://stackoverflow.com/a/2928819/315935) for details. – Oleg Aug 21 '13 at 14:19
Thanks a lot Oleg, that's exactly what I did and it works like a charm :). – Gomti Mehta Aug 21 '13 at 20:11
Answers from kmk and Oleg together worked for me, I dont know how to check both as asnwers :), would have been possible either answer alone :) – Gomti Mehta Aug 22 '13 at 14:33

kmk · Answer 2 · 2013-08-21T11:49:28.260

Your jsonReader is looking a little jacked. The 'd' character wraps the JSON return for ASMX service calls as of ASP.NET 3.5. See here: http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/

Try:

        jsonReader: {
            repeatitems: false,
            root: "d.rows", // or d dot whatever property name you use for the collection of data
            page: "d.page", // or d dot whatever property name you use for the current page 
            total: "d.total", // or d dot whatever property name you use for total pages
            records: "d.records", // or d dot whatever property name you use for total record count
            id: "BReceiptId",
        },

See here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data

I return an object that looks like this:

public class GridData<T>
{
    public int Total { get; set; }
    public int Page { get; set; }
    public int Records { get; set; }
    public List<T> Rows { get; set; }
    public object UserData { get; set; }
}

so my jsonReader is as follows (note the case sensitivity):

        jsonReader: {
            repeatitems: false,
            root: "d.Rows",
            page: "d.Page",
            total: "d.Total",
            records: "d.Records",
            userdata: "d.UserData",
            id: "Id"
        },

Hi kmk,Thanks for the quick response. I am returning a list from my webservice method like below [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public List BatchReceiptsTable() { I do not have any Model to represent something like GridData as you have shown. I have class that only represents the type of items I am going display in the grid and list contains those. Is it required to create a type like "GridData? — Gomti Mehta, Aug 20 '13 at 20:37
Yes I'd recommend building an object that matches how you define the jsonReader. And listen to Oleg below - your success, complete, and error handlers are being overrridden in the ajaxGridOptions prop. Use the events to handle success and failure: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events — kmk, Aug 21 '13 at 11:31

jqGrid keeps on displaying "Loading"

2 Answers2