jqGrid Does Not Show The Returned JSON Data

Question

I use jqGrid in ASP.NET page. In .aspx page, I have -

<div id="divMy" style="width: 100%; overflow: auto;">
    <div id="divMyTable" style="width: 97%; display: none;">
        <table id="MyTable">
            <tr>
                <td></td>
            </tr>
        </table>
        <div id="divMyTablePager"></div>
    </div>
</div>

In .js file, I have -

var CASortInfo = {
    sortname: $('#MyTable').jqGrid('getGridParam', 'sortname'),
    sortorder: $('#MyTable').jqGrid('getGridParam', 'sortorder'),
    page: $('#MyTable').jqGrid('getGridParam', 'page'),
    rows: $('#MyTable').jqGrid('getGridParam', 'rows')
};


    $("#MyTable").jqGrid({
        url: "../Services/My.asmx/ReadMyTable",
        datatype: 'json',
        mtype: 'POST',
        prmNames: {
            search: "isSearch",
            nd: null,
            rows: "PageSize",
            page: "PageNumber",
            sort: "sortField",
            order: "sortOrder"
        },
        postData: { ID: $('#hfID').val() },
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (postData) {
            return JSON.stringify(postData);
        },
        colNames: ["", "My", "Date Created", "Notes", "Action"],
        colModel: [
            { name: "MyID", index: "MyID", resizable: false, hidden: true },
            { name: "MyName", index: "MyName", resizable: false, width: 250 },
            { name: "CreatedOn", index: "CreatedOn", resizable: false },
            { name: "Notes", index: "Notes", resizable: false },
            { name: "Buttons", formatter: ActionButtons, width: 70 }
        ],
        sortname: "CreatedOn",
        sortorder: "asc",
        ignoreCase: true,
        autowidth: true,
        shrinkToFit: true,
        height: "auto",
        pager: "#divMyTablePager",
        toppager: true,
        rowNum: 20,
        rowList: [5, 10, 20, 50],
        viewrecords: true,
        gridview: true,
        rownumbers: false,
        hoverrows: true,
        multiselect: false,
        jsonReader: {
            root: function (obj) { return obj.d.rows; },
            page: function (obj) { return obj.d.page; },
            total: function (obj) { return obj.d.total; },
            records: function (obj) { return obj.d.records; },
            repeatitems: false,
            id: "0"
        },
        beforeRequest: function () {
            CASortInfo = {
                sortname: $('#MyTable').jqGrid('getGridParam', 'sortname'),
                sortorder: $('#MyTable').jqGrid('getGridParam', 'sortorder'),
                page: $('#MyTable').jqGrid('getGridParam', 'page'),
                rows: $('#MyTable').jqGrid('getGridParam', 'rows')
            };
        },
        gridComplete: function () {

            $('#MyTable').jqGrid('setGridParam', {
                sortname: CASortInfo.sortname,
                sortorder: CASortInfo.sortorder,
                page: CASortInfo.page,
                rows: CASortInfo.rows
            });


                $("#divMyTable").show();
                $("#MyTable").setGridWidth($("#divMyTable").width());
        }
    });

I can see the responded JSon data as -

{"d":{"__type":"Core.DTO.JQGridModel","total":"1","page":"1","records":"1","rows":[{"MyID":"627d6ca3-5bbc-4aa8-9e53-76afe4869ae2","MyName":"This\u0027s a test.","CreatedOn":"\/Date(1394135983350)\/","Notes":"Yes","isActive":null}]}}

I can see breakpoint is hit in gridComplete. What needs to be done to show the data grid with data?

Thanks,

Answer 1

Just found out that I messed up the case in divMyTable. After it is corrected, it is working. Thanks