jqGrid userData to show a value in View (asp.net mvc3)

Question

I'm new to jqGrid. My task is now to show TotalDiabetes in View (asp.net MVC3) which has jqGrid, so I have chosen userData. My Controller code for jqGrid as follows,

 extraPersons = ExtraPersonService.GetAllExtraPersons();
        int TotalDiabetesCount = extraPersons.First().TotalDiabetes;

        int pageIndex = gridSettings.pageIndex;
        int pageSize = gridSettings.pageSize;
        int totalRecords = extraPersons.Count;
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        int startRow = (pageIndex - 1) * pageSize;
        int endRow = startRow + pageSize;

        var jsonData = new
        {
            total = totalPages,
            page = pageIndex,
            records = totalRecords,
            userdata = new { TotalDiabetesCount = "totalDiabetes" },
            rows =
            (
              extraPersons.Select(e => new
              {
                  Id = e.ExtraPersonId,
                  Name = e.FirstName + " " + e.LastName,
                  Diabetes = e.Diabetes ,
                  BP = e.BP,
                  Arrived = e.Arrived,
                  TreatmentApplied = e.TreatmentApplied,                       

              })
            ).ToArray()
        };
        return Json(jsonData);

My JavaScript code for jqGrid as follows,

     jQuery("#allextraperson").jqGrid({
            url: '/ExtraPerson/GetAllExtraPersons/',
            datatype: 'json',
            mtype: 'POST',

            colNames: gridInfoJSON.GridModel.ColumnDisplayArray,
            colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'Name', index: 'Name', width: 200, formatter: generateNameLink },
            { name: 'Diabetes', index: 'Diabetes', width: 55, align: 'center', formatter: generateDiabetesLabel },
            { name: 'BP', index: 'BP', width: 50, align: 'center', formatter: generateBPLabel },
            { name: 'Arrived', index: 'Arrived', width: 70, align: 'center', formatter: generateArrivedLabel },               
            { name: 'Delete', index: 'Delete', width: 75, align: 'center', formatter: deleteformatter }

       ],
            jsonReader: {
                id: 'Id',
                repeatitems: false                   
            },
            height: "100%",
            width: 970,
            pager: '#allextraperson-pager',
            rowNum: 10,
            rowList: [10, 20, 30, 50],
            sortname: 'Id',
            sortorder: 'asc',
            viewrecords: true,                 
            loadComplete: function (data) {
                var table = this;
                setTimeout(function () {
                    updatePagerIcons(table);

                }, 0);

                var totaldiabetes = jQuery("#allextraperson").getGridParam('totalDiabetes');                                     
                alert("Total diabetes:" + totaldiabetes);
            }               
        });
    }

My View Code to show TotalDiabetes as follows

<span class="user_info muted" style="position: inherit;">Total Diabetes
        :&nbsp <strong class="orange"> totalDiabetes </strong></span>

The alert shows Total diabetes:null I don't know what I did wrong, please anyone suggest me a solution.

Answer 1

Myself found what I did wrong, In the Controller code, I have replaced the line

userdata = new { TotalDiabetesCount = "totalDiabetes" },

with this line

userdata = new { totalDiabetes = TotalDiabetesCount }

In my javascript code, I have replaced the line

var totaldiabetes = jQuery("#allextraperson").getGridParam('totalDiabetes');

with these lines,

var userData = jQuery("#allextraperson").getGridParam('userData');
                if (userData.totalDiabetes) {
                    $('#total-diabetes').text(userData.totalDiabetes);
                }

And in my View I have added an id = "total-diabetes" to strong tag in html. Thus I got the output.