Question

Here’s the JSON:

{
    "page": "1",
    "total": "1",
    "records": "2",
    "rows": [
        {
            "Id": 3,
            "FirstName": "Test",
            "LastName": "Testerson",
            "CustomerNumber": "1234",
            "EmailAddress": "[e-mail]",
            "Subject": "Test1",
            "OrderNumber": "4321",
            "Comments": "This is a test"
        },
        {
            "Id": 4,
            "FirstName": "Test2",
            "LastName": "Testerson2",
            "CustomerNumber": "2222",
            "EmailAddress": "[e-mail]",
            "Subject": "Test1",
            "OrderNumber": "3333",
            "Comments": "This is a test"
        }
    ]
}

Here’s my current script and markup (why isn’t this working?):

<table id="list1"></table>
<div id="pager1"></div>
<script type="text/javascript">
    function getData(pdata) {
        var params = new Object();
        params.page = pdata.page;
        params.pageSize = pdata.rows;
        params.sortIndex = pdata.sidx;
        params.sortDirection = pdata.sord;


        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "ScriptServices/PNScriptService.asmx/GetContactRequests",
            data: JSON.stringify(params),
            dataType: "json",
            success: function (data, textStatus) {
                if (textStatus == "success") {
                    var thegrid = $("#list1")[0];
                    thegrid.addJSONData(data.d);
                }
            },
            error: function (data, textStatus) {
                alert('An error has occured retrieving the data.');
            }
        });
    }

    $(document).ready(function () {
        $("#list1").jqGrid({
            datatype: function (pdata) {
                getData(pdata);
            },
            jsonReader: {
                page: "page",
                total: "total",
                records: "records",
                root: "rows",
                id: "Id",
                repeatitems: false
            },
            colNames: ['Id', 'FirstName', 'LastName', 'CustomerNumber', 'EmailAddress', 'Subject', 'OrderNumber', 'Comments'],
            colModel: [
                { name: 'Id', index: 'Id', width: 90 },
                { name: 'FirstName', index: 'FirstName', width: 100 },
                { name: 'LastName', index: 'LastName', width: 100 },
                { name: 'CustomerNumber', index: 'CustomerNumber', width: 80, align: "right" },
                { name: 'EmailAddress', index: 'EmailAddress', width: 100 },
                { name: 'Subject', index: 'Subject', width: 80 },
                { name: 'OrderNumber', index: 'OrderNumber', width: 80, align: "right" },
                { name: 'Comments', index: 'Comments', width: 250, sortable: false }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: $('#pager1'),
            sortname: 'Id',
            viewrecords: true, 
            sortorder: "desc",
            caption: "Contact Requests"
        });
    });
</script>

btw: The JSON string above is the exact string returned by the script service. I can hit a break point in my script service and grab that string, and I can alert the string in the calling ajax script on success, and the strings are identical. So I know it’s not the script service, and I know that that json string is being passed, as shown, into the jqGrid.

Answer 1

Thanks Oleg for the info, but it turned out to be the following:

thegrid.addJSONData(JSON.parse(data.d));

I needed to JSON.parse the data before passing it into the grid.