jqGrid stuck on loading???

Question

I am trying to use the JQuery plugin jqGrid with an asp .net mvc app.

I am passing the grid a JSON object in the following format as in the jqGrid documentation:

{
    "total":1,
    "page":1,
    "records":10,
    "rows":
     [{
     "i":1,"cell":["foo","bar"]},
           {"i":2,"cell":["foo1","barr"]},
           {"i":3,"cell":["foo2","barrr"]}]
}

and the jqGrid is setup:

jQuery("#searchResults").jqGrid({
                    url: '/Customer/SearchResults/',
                    datatype: 'json',
                    mtype: 'GET',
                    colNames: ['Surname', 'Forename'],
                    colModel: [
                      { name: 'Surname', index: 'Surname', width: 200, align: 'left' },
                      { name: 'Forename', index: 'Forename', width: 200, align: 'left'}],
                    pager: jQuery('#pager'),
                    rowNum: 10,
                    rowList: [5, 10, 20, 50],
                    sortname: 'Id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '/scripts/themes/coffee/images',
                    caption: 'My first grid'
                });

Its hitting my action but the grid is stuck on loading, any ideas what I am doing wrong??

Thanks

Answer 1

If the grid is "stuck on loading" that generally means that the grid has either not received a response or that the response contains data it could not used to populate the grid. The first thing to look at is the response itself, in either Firebug's Net tab or Fiddler. Make sure it is actually JSON and not a 500 error or an HTML error message. Second, they very careful attention to JavaScript errors. You will need to use Firebug or IE 8's debugger (which you must manually turn on) in order to catch the errors, because otherwise they may be well hidden; JavaScript errors do not tend to be obvious to the user. You can then trace through the call stack to figure out why the grid does not like your data.

That said, doing this manually is a bit of a pain, which is why I wrote extension methods to create appropriately-formatted data for the grid from any IQueryable.