jqGrid JSON - Why doesn't jqGrid like this JSON? And can someone please provide the script and markup that will work with this string?

Question

Here's the JSON:

{
    "page": "1",
    "total": "1",
    "records": "2",
    "rows": [
        {
            "Id": 3,
            "FirstName": "Test",
            "LastName": "Testerson",
            "CustomerNumber": "1234",
            "EmailAddress": "test@test.com",
            "Subject": "Test1",
            "OrderNumber": "4321",
            "Comments": "This is a test"
        },
        {
            "Id": 4,
            "FirstName": "Test2",
            "LastName": "Testerson2",
            "CustomerNumber": "2222",
            "EmailAddress": "test@test.com",
            "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.

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

Your problem is that you user very very old template code for loading JSON data. If your server produce the JSON data which you posted you can simplify for code to the following.

In another answers you will find more code examples in case you use ASMX, which produce a litle other JSON code as you posted.

edited May 23 '17 at 12:04

Community

1
1

answered May 12 '11 at 19:21

Oleg

220,925
34
403
798

I only did that because this is not calling the script service: $(document).ready(function () { $("#list1").jqGrid({ url: "ScriptServices/PNScriptService.asmx/GetContactRequests", datatype: 'json',... Any ideas why? – tbmac3 May 12 '11 at 19:56
@tbmac3: You can verify in the [Fiddler](http://www.fiddler2.com/fiddler2/) or [Firebug](http://getfirebug.com/), that the client code should do post the request to the server. if you post at least prototype of the `GetContactRequests` method I could try to help you. – Oleg May 12 '11 at 20:55

score 0 · Accepted Answer · answered May 13 '11 at 04:04

0

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.

answered May 13 '11 at 04:04

tbmac3

3
2

jqGrid JSON - Why doesn't jqGrid like this JSON? And can someone please provide the script and markup that will work with this string?

2 Answers2