'Unable to get value of the property 'Id'' error from jqGrid

Question

I'm attempting to integrate jqGrid into an ASP.NET MVC 4 Razor view and have hit a snag that has me baffled. When I attempt to hit the view in debug-mode using IE9, I am getting this Javascript error:

Microsoft JScript runtime error: Unable to get value of the property 'id': object is null or undefined.

Razor:

<link href="/Content/themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
@using(Html.BeginForm())
{
    <fieldset>
        <legend>@Model.FirstName @Model.LastName - Contacts/Providers</legend>
        <table id="clientContacts" cellpadding="0" cellspacing="0"></table>
    </fieldset>
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#clientContacts").jqGrid({
            url: '@Url.Action("GetClientContactsAndProviders")',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['clientContactId', 'Type', 'Who', 'Phone', 'button', 'Comments'],
            colModel: [
                { name: 'clientContactId', index: 'clientContactId', hidden: true },
                { name: 'contactType', index: 'Type', width: 190, align: 'left' },
                { name: 'contactName', index: 'Who', width: 200, align: 'left' },
                { name: 'contactPhone', index: 'Phone', width: 100, align: 'left' },
                { name: 'newContactButton', index: 'button', width: 50, align: 'center' },
                { name: 'contactComments', index: 'Comments', width: 240, align: 'left'}
            ],
            rowNum: 20,
            width: 780,
            height: '100%'
        });
    });
</script>

Action:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetClientContactsAndProviders(string sidx, string sord, int page, int rows)
{
    var clientId = CookieHelper.GetClientIdCookieValue();
    var client = _clientRepo.GetClient(clientId);
    var contacts = client.Contacts.ToList();
    var model = new
        {
            total = 1,
            page = 1,
            records = contacts.Count,
            rows = contacts.Select(c =>
                new
                    {
                        clientContactId = c.ClientContactId.ToString(),
                        contactType = c.ContactType.Description,
                        contactName =
                            c.Contact.Person.FirstName + " " + c.Contact.Person.LastName,
                        contactPhone = c.Contact.Person.Phone1 ?? string.Empty,
                        newContactButton = string.Empty,
                        contactComments = c.Comments ?? string.Empty
                    }).ToArray()
        };
    return Json(model);
}

I do not get this error in Chrome, and I can't for the life of me figure out what this mythical "id" property is. Please help!

Edit (after @Justin Ethier answer): Full disclosure, didn't think this mattered, but I'm attempting to pass in four "empty" rows in this situation. In these cases, clientContactId defaults to 0, and I think this may have been part of the problem. I changed my grid Javascript as follows:

$(document).ready(function () {
    $("#clientContacts").jqGrid({
        url: '@Url.Action("GetClientContactsAndProviders")',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['clientContactId', 'Type', 'Who', 'Phone', 'button', 'Comments'],
        colModel: [
            { name: 'clientContactId', index: 'clientContactId', hidden: true },
            { name: 'contactType', index: 'Type', width: 190, align: 'left' },
            { name: 'contactName', index: 'Who', width: 200, align: 'left' },
            { name: 'contactPhone', index: 'Phone', width: 100, align: 'left' },
            { name: 'newContactButton', index: 'button', width: 50, align: 'center' },
            { name: 'contactComments', index: 'Comments', width: 240, align: 'left'}
        ],
        rowNum: 20,
        width: 780,
        height: '100%',
        jsonReader: {
            root: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
            repeatitems: true,
            cell: 'cell',
            id: 'clientContactId',
            userdata: 'userdata',
            subgrid: { root: 'rows', repeatitems: true, cell: 'cell' }
        }            
    });
});

Then, and most importantly, when the four rows are "empty" I added this code to build the rows object that jqGrid expects:

var rowBuilder = new List<object>();
for(var i = 0;i < contacts.Count; i++)
{
    rowBuilder.Add(new
                       {
                           id = i + 1,
                           cell = new
                                      {
                                          clientContactId = contacts[i].ClientContactId.ToString(),
                                          contactType = contacts[i].ContactType.Description,
                                          contactName =
                       contacts[i].Contact.Person.FirstName + " " + contacts[i].Contact.Person.LastName,
                                          contactPhone = contacts[i].Contact.Person.Phone1 ?? string.Empty,
                                          button = string.Empty,
                                          contactComments = contacts[i].Comments ?? string.Empty
                                      }
                       });
}
var model = new
                {
                    total = 1,
                    page = 1,
                    records = contacts.Count,
                    rows = rowBuilder.ToArray()
                };
return Json(model);

And now it works!

Answer 1

GET the cell value in firefox, chrome you have to use...

Trow.cells[0].childNodes[0].nodeValue will work for all browser while

Trow.cells[0].innerText will work only for ie not for firefox and chrome....

Answer 2

jqGrid uses a jsonReader for retrieving json data. If one is not explicitly provided, the grid uses the following default one, according to the jqGrid documentation:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

I suspect that the id you are receiving the error for is the id column the default reader is expecting, which is missing from your result set. You should be able to fix this by providing a reader that specifies the correct row ID:

jsonReader : {
    root: "rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: true,
    cell: "cell",
    id: "clientContactId",
    userdata: "userdata",
    subgrid: {root:"rows", 
    repeatitems: true, 
    cell:"cell"
    }
},

Does that help?