jqGrid not displaying JSON data

Question

I'm using asp.net mvc to create a webpage that renders a jqGrid for data in my azure table. The grid will callback into my controller and using the debugger, I can visually verify data is being generated correctly. The issue is that once the data is returned as a JSON string, the jqGrid throws this error:

b.jgrid.getAccessor(p, d.cell) is undefined
http://localhost:54758/jquery.jqGrid.min.js
Line 65

I've looked online for documentation but have been unsuccessful in returning anything except what appears to be repository snapshots. I've stripped down my code to only have one column of data (shown below) returned as a string and still nothing.

If I add the line "datatype: 'local'," to my jqGrid options, the error isn't thrown. However, data is still not being rendered either. None of the other questions suggested in "Similar Questions" solved my issue. The data is just an Id field and is a simple C# string.

Below is the aspx file contents used to render the jqGrid:

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">  
<%--Must load language tag BEFORE script tag--%>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            autowidth: true,
            url: '/HouseData/GridData/',
            datatype: 'local',  <---instead of 'local' I also tried 'jsonstring'
            mtype: 'POST',
            colNames: ['House Name'],
            colModel: [
                { name: 'houseName', index: 'houseName', key: true, width: 80, align: 'right', hidden: false }],

            pager: jQuery('#pager'),
            rowNum: 20,
            rowList: [5, 10, 20, 50],
            sortname: 'houseName',
            sortorder: "desc",
            height: 400,
            viewrecords: true,
            imgpath: ''
       });
    });

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div id="main">
    <h2><a href="#">Show House Name</a></h2> 
    <div class="disignBoxFirst">
        <div class="boxContent">
                <%: Html.Partial("HouseDataSearch") %>
        </div>
    </div>
    <hr />
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div> 
</div>
</asp:Content>

The function used to compose the json string, contained in the C# file "HouseDataController.cs", is below (initially I didn't have the "datatype" option in the aspx file shown above for the jqGrid):

public JsonResult GridData(string sidx, string sord, int page, int rows, string houseName)
    {            
        //Setup values to return to the view for display of user entered values            
        ViewData["HouseName"] = houseName;


        //Get table data
        CloudStorageAccount storageAccount = CloudStorageAccount.FromConfigurationSetting("ConnectionString");
        ReportStorageDataServiceContext storageContext = new ReportStorageDataServiceContext(storageAccount.TableEndpoint.ToString(), storageAccount.Credentials);

        int houseCount = 0;
        IQueryable<HouseDataModel> houses = storageContext.CreateQuery<HouseDataModel>("HouseDataTable").Where(h => h.isAvailable == true);
        List<HouseDataModel> queryDetails = new List<HouseDataModel>();
        foreach (HouseDataModel house in houses)
        {
            queryDetails.Add(house);
            houseCount++;
        }

        //Figure out paging
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        int totalRecords = houseCount;
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = (from house in queryDetails select new { User = house.houseName }).ToArray()
        };

        return Json(jsonData);
    }

The error message was caught using Firebug. If this is not specific/detailed enough or if it was resolved in another thread please advise.

Thanks!

Answer 1

Try this:

 jQuery("#list").jqGrid({
            autowidth: true,
            url: '/HouseData/GridData/',
            datatype: 'local',  <---instead of 'local' I also tried 'jsonstring'
            mtype: 'POST',
            colNames: ['House Name'],
            colModel: [
                { name: 'houseName', index: 'houseName', key: true, width: 80, align: 'right', hidden: false }],

            pager: jQuery('#pager'),
            rowNum: 20,
            rowList: [5, 10, 20, 50],
            sortname: 'houseName',
            sortorder: "desc",
            height: 400,
            viewrecords: true,
            imgpath: '',
            jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",  
                repeatitems: false,
                cell: "cell",
                id: "id",
                userdata: "userdata",    
               },           
       });

I added the jsonReader part. I had the same problem and this seems to fix it.

Answer 2

Try changing the jqgrid's mtype to 'GET' and datatype to 'json':

datatype: 'json'
mtype: 'GET'

and change your GridData controller action's return to:

return Json(data, JsonRequestBehavior.AllowGet);