jqGrid not displaying JSON data

Question

I\'m hoping to use jqGrid for a current web project that I\'m working on. The problem is, I can\'t seem to get the JSON data to be displayed by the grid. Here is the grid\'s ini

Answer 1

Actually, it's quite straightforward to get JSON data into a jqGrid, and leave jqGrid to handle paging and sorting, without ever needing to re-call your JSON service.

The key to it is this line:

loadonce: true,

Now, there's no need for your JSON service to bother with rows, page, total or record values being sent around. You just load your JSON data once, and leave jqGrid to do the rest.

So, for example, here's one of my JSON web services:

http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS

And this is the jqGrid I want to create out of it:

Here's my entire jqGrid script:

$("#tblOrders").jqGrid({
    url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
    contentType: "application/json",
    datatype: "json",
    jsonReader: {
        root: "GetOrdersForCustomerResult",
        id: "OrderID",
        repeatitems: false
    },
    mtype: "GET",
    colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"],
    colModel: [
        { name: "OrderID", width: 80, align: "center" },
        { name: "OrderDate", width: 90, align: "center" },
        { name: "ShipName", width: 250 },
        { name: "ShipAddress", width: 250 },
        { name: "ShipCity", width: 95 },
        { name: "ShippedDate", width: 95 },
    ],
    pager: "#pager",
    height: 'auto',
    rowNum: 8,
    rowList: [8, 16, 24],
    loadonce: true,
    sortname: "OrderID",
    sortorder: "desc",
    viewrecords: true,
    gridview: true,
    autoencode: true,
    caption: "Northwind orders"
});

And that's it.

Further details on my blog:

www.MikesKnowledgeBase.com