Question

jqGrid is not displaying the response returned by java service.

Html:

<table id="fbDetailTable" style="display: none"></table>

Java Script:

jQuery("#fbDetailTable").jqGrid({

url: "/ReportBatch/rs/ReportService/getFB?fB="+frtBill,
    datatype: "json",
colNames: ['Store Number', 'Order Number', 'SKU number',
           'Shipped Quantity','Order Created Date'],
colModel:[{name:'strNbr',index:'strNbr',width:100,jsonmap:'strNbr'},
          {name:'orderNbr',index:'orderNbr',width:100,jsonmap:'orderNbr'},
          {name:'skuNbr',index:'skuNbr',width:100,jsonmap:'skuNbr'},
          {name:'shpdQty',index:'shpdQty',width:100,jsonmap:'shpdQty'},
          {name:'ordCrtDt',index:'ordCrtDt',width:100,jsonmap:'ordCrtDt'}],
jsonReader: { repeatitems : false, strNbr: "0" },
viewrecords: true, 
loadonce:true,                                
    caption:"Order Details"
});

Service response:

[{"strNbr":"6310",
  "orderNbr":"10979577",
  "skuNbr":"646274",
  "shpdQty":"1",
  "ordCrtDt":"2013-01-29"},     
 {"strNbr":"6310",
  "orderNbr":"10979583",
  "skuNbr":"765992",
  "shpdQty":"3",
  "ordCrtDt":"2013-01-29"
 }]

Response Headers:

Content-Type    application/json
Date    Mon, 04 Feb 2013 20:21:24 GMT
Server  Apache-Coyote/1.1
Transfer-Encoding   chunked

Answer 1

The main error is that your input JSON data don’t have “rows” property and place the data directly as array. In the case you should use

root: function (obj) { return obj; }

inside of jsonReader. Moreover the setting strNbr: "0" is wrong. It should be id: "strNbr" instead.

It’s very important additionally to use rowNum with some large enough value as the default value 25 (see the documentation). If you don’t do this jqGrid will display only the 25 first row of data. It’s not what you want.

Other important options which I strictly recommend you to use are: gridview: true, autoencode: true. The option height: "auto" is also very practical in the most scenarios. So the code should be about the following

$("#fbDetailTable").jqGrid({
    url: "AVVD.json",
    datatype: "json",
    colNames: ["Store Number", "Order Number", "SKU number",
               "Shipped Quantity", "Order Created Date"],
    colModel: [
        { name: "strNbr" },
        { name: "orderNbr" },
        { name: "skuNbr" },
        { name: "shpdQty" },
        { name: "ordCrtDt" }
    ],
    cmTemplate: { width: 120 },
    jsonReader: {
        repeatitems: false,
        id: "strNbr",
        root: function (obj) {
            return obj;
        }
    },
    rowNum: 10000,
    gridview: true,
    autoencode: true,
    height: "auto",
    viewrecords: true,
    loadonce: true,
    caption: "Order Details"
});

You can additionally declare variables like

var intTemplate = { sorttype: "integer", formatter: "integer" },
    dateTemplate = { sorttype: "date", formatter: "date" };

and use templates (see the answer) and modify colModel to the following

colModel: [
    { name: "strNbr", template: intTemplate },
    { name: "orderNbr", template: intTemplate },
    { name: "skuNbr", template: intTemplate },
    { name: "shpdQty", template: intTemplate },
    { name: "ordCrtDt", template: dateTemplate }
]

The resulting demo you will see here: