jqGrid with JSON is rendering table but without data in MVC Project

Question

I have set up jqGrid with JSON in my .Net MVC project. The grid is rending, but the data is not appearing. I am not sure what the problem is. Any help would be very much appreciated.

I have the code below in my controller. jsonData does get filled and passed to my Index. While stepping through the code I can see that jsonData has 1 row with Cell Index 0,1,2,3,4 populated with data. I am not sure why this data is not being passed to the javascript on my Index page and displayed in the grid.

I grabbed the example from this site: http://www.schnieds.com/2010/01/gridview-in-aspnet-mvc.html

var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = (
                  from a in activities
                  select new
                  {
                      i = a.ActivityId,
                      cell = new string[] {
                      a.ActivityId.ToString(),
                      a.Date.ToString(),
                      a.Person.Name.ToString(),
                      a.ActivityName.ToString(),
                      a.Hours.ToString()                          
                    }
                  }).ToArray()
        };

        // Return the result in json
        return Json(jsonData);

My the javascript code in my Index page looks like this:

var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
    var gridDataUrl = '/Home/JsonActivitiesCollection';

    // use date.js to calculate the values for this month
    var startDate = Date.parse('today').moveToFirstDayOfMonth();
    var endDate = Date.parse('today');

    jQuery("#list").jqGrid({
        url: gridDataUrl + '?startDate=' + startDate.toJSONString() + '&endDate=' + endDate.toJSONString(),
        datatype: "json",
        mtype: 'GET',
        colNames: ['Activity Id', 'Date', 'Employee Name', 'Activity', 'Hours'],
        colModel: [
          { name: 'ActivityId', index: 'ActivityId', width: 100, align: 'left' },
          { name: 'Date', index: 'Date', width: 100, align: 'left' },
          { name: 'Person.Name', index: 'Person.Name', width: 100, align: 'left' },
          { name: 'ActivityName', index: 'ActivityName', width: 100, align: 'left' },
          { name: 'Hours', index: 'Hours', width: 100, align: 'left' }
          ],              
        rowNum: 20,
        rowList: [10, 20, 30],
        imgpath: gridimgpath,
        height: 'auto',
        width: '700',
        pager: jQuery('#pager'),
        sortname: 'ActivityId',
        viewrecords: true,
        sortorder: "desc",
        caption: "Activities"
    });

Answer 1

Relpace

i = a.ActivityId

with

id = a.ActivityId