jgGrid not displaying json data

Question

This is driving me crazy, so any help would be awesome:

My html is as follow:

<asp:Content ID="Content3" ContentPlaceHolderID="Content" runat="server" class="MainLoginScreen">
       <table id="StudyTable"></table>
       <div id="StudiesPager"></div>
</asp:Content>

My javascript is as follows:

<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#StudyTable").jqGrid({
                url: '/StudyManager/GetStudyTable.aspx',
                datatype: "json",
                mtype:"GET",
                colNames: ['Name', 'URL', 'Creation Date', 'Description', 'Status'],
                colModel:[
                    { name: 'Name', width: 200},
                    { name: 'URL', width: 100 },
                    { name: 'Creation_Date', width: 300},
                    { name: 'Description', width: 200 },
                    { name: 'Status', width: 200}
                ],
            rowNum:10,
            rowList:[10,20,30],
            viewrecords: true,
            sortname: 'Name',
            sortorder: "asc",
            pager: $('#StudiesPager'),  
            imgpath: '/Content/Images',
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: true,
                cell: "cell",
                id: "id"
            },
            width: 800,
            height: 400 
            });
        }); 
    </script>

and my cs code is:

protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("{'total':1,");
            sb.Append("'page':'1',");
            sb.Append("'records':'1',");
            sb.Append("'rows': [");
            sb.Append("{ 'id':'123', 'cell':['abc','abc','abc','abc','abc']}");
            sb.Append("]}");

            Response.Clear();
            Response.StatusCode = 200;
            Response.Write(sb.ToString());
            Response.End();
        }

The table and pager are displayed perfectly, but no data is rendered to the table. The returned json from my cs seems to be in the correct format:

{'total':1,'page':'1','records':'1','rows': [{ 'id':'123', 'cell'['abc','abc','abc','abc','abc']}]}

But no data is being displayed in the grid.

Answer 1

Of all things that could cause the problem - it was the single quotations. JSON doesnt seem to allow 'word', but rather needs \"word\".

So the output json from the cs should have been :

{"total":"1","page":"1","records":"1","rows": [{ "id":"123", "cell"["abc","abc","abc","abc","abc"]}]} 

Answer 2

Also you can create something like:

public class JqGridJsonData
{
   public int Total {get;set;}
   public int Page {get;set;}
   etc
}

And serialize this to json with Json.NET http://james.newtonking.com/pages/json-net.aspx