jQuery Grid Plugin – jqGrid

Post edited 21:47 – 06/05/2012 by zippy
Post edited 21:48 – 06/05/2012 by zippy
Post edited 21:50 – 06/05/2012 by zippy
Post edited 21:53 – 06/05/2012 by zippy
Post edited 21:53 – 06/05/2012 by zippy

Hello. I am new to JQGrid and have been trying to get it working with some JSON data, but it's not going well. I wonder if anyone would be kind enough to help me out.

Here's my JSON data:

{
   "total":"1",
   "page":"1",
   "userdata":{

   },
   "records":"2",
   "rows":[
      {
         "DateOfBirth":"11/04/2012 12:00:00 AM",
         "DisambiguationNote":"Boring guy",
         "FirstName":"Joe",
         "LastName":"Bloggs",
         "MiddleName":"Binkie",
         "PersonId":"1"
      },
      {
         "DateOfBirth":"01/01/2001 12:00:00 AM",
         "DisambiguationNote":"someone else",
         "FirstName":"Edna",
         "LastName":"Edwards",
         "MiddleName":"Edith",
         "PersonId":"8"
      }
   ]
}

And here's my grid code:

$(function () {
    $("#persongrid").jqGrid({
        url: '/Person/List',
        datatype: 'json',
        mtype: 'GET',
        jsonreader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "5"  ,
            cell: ""  ,
            userdata: "userdata"
        },
        colModel: [
            { name: 'DateOfBirth', index: 'DateOfBirth',sorttype:'date' },
            { name: 'DisambiguationNote', index: 'DisambiguationNote' },
            { name: 'FirstName', index: 'FirstName' },
            { name: 'LastName', index: 'LastName' },
            { name: 'MiddleName', index: 'MiddleName' },
            { name: 'PersonId', index: 'PersonId',sorttype:'int' }
        ],
        pager: '#persongridpager',
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        gridview: true,
        caption: 'People'
    });
});

What I get is a grid that has the column headings but no contents. It just displays "Loading…" forever.

After a bit of investigation I can see that it makes multiple calls to the getAccessor method and on the last call the first parameter to the method (obj) is undefined. That seems to be what's causing the grid to stop rendering, but why?

I can see that the JSON data is being retrieved as above from the AJAX request, and I have been through the JSON data instructions for JQGrid quite carefully but can't see what I'm doing wrong. Can anyone help? Thank you.

Oleg, thank you again. That was the problem and I had stared at it for so long without spotting that.