Display data in jqGrid Footer row in MVC Application

Question

I need help display data in the jqGrid footer row. This is my configuration on the Server. Notice the userdata = (Hours) line.

// Format the data for the jqGrid
        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,                                 
            rows = (
                  from a in activities
                  select new
                  {
                      id = a.ActivityId,
                      cell = new string[] {
                      a.ActivityId.ToString(),                          
                      DateTime.Parse(a.Date.ToString()).ToShortDateString(),                          
                      a.Person.Name.ToString(),
                      a.ActivityName.ToString(),
                      a.Hours.ToString()                          
                    }
                  }).ToArray(),
            userdata = (Hours)
        };

        // Return the result in json
        return Json(jsonData, JsonRequestBehavior.AllowGet);

The userData amount that I need displayed in the footer is coming through in the JSON. I am using Fiddler to view it. Here is a screenshot of the fiddler view:

I need to display this value of "12" in the footer. This the HTML I am using to read the JSON:

        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: 40, align: 'left' },
          { name: 'Date', index: 'Date', width: 50, align: 'left' },
          { name: 'Person.Name', index: 'Person.Name', width: 100, align: 'left', resizable: true },
          { name: 'ActivityName', index: 'ActivityName', width: 100, align: 'left', resizable: true },
          { name: 'Hours', index: 'Hours', width: 40, align: 'left' }
          ],
        loadtext: 'Loading Activities...',
        multiselect: true,
        rowNum: 20,
        rowList: [10, 20, 30],
        imgpath: gridimgpath,
        height: 'auto',
        width: '700',
        pager: jQuery('#pager'),
        sortname: 'ActivityId',
        viewrecords: true,
        sortorder: "desc",
        caption: "Activities",
        footerrow: true, userDataOnFooter: true, altRows: true       
    }).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search Activities" });

Answer 1

Try to use following

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

then the userdata part of the JSON data will be

  "userdata":{"Hours":12}

which follows to displaying of the bold value 12 in the column Hours of the footer part of the jqGrid table.