problem getting json data inside my JqGrid

Question

I am having problem rendering data in my Jqgrid..My JSON data is in this form

[
    {
        "orderNumber": "5917500220100811",
        "chainNumber": "1",
        "divisionNumber": "1",
        "customerNumber": "37029",
        "loadNumber": "59175",
        "orderType": "1",
        "stopSeq": 2,
        "latestTime": "Aug 13, 2010 1:12:21 PM",
        "orderStatus": "6",
        "batchNumber": "1059",
        "maxPalletCube": "1982179262",
        "billingFlag": "N",
        "orderDetailsList": [],
        "id": 2384,
        "createdDate": "Aug 11, 2010 6:54:48 PM",
        "createdUser": "USER",
        "lastModifiedDate": "Aug 13, 2010 10:12:21 AM",
        "lastModifiedUser": "USER"
    },
    {
        "orderNumber": "5917500120100811",
        "chainNumber": "1",
        "divisionNumber": "1",
        "customerNumber": "37003",
        "loadNumber": "59175",
        "orderType": "1",
        "stopSeq": 1,
        "latestTime": "Aug 13, 2010 1:12:21 PM",
        "orderStatus": "6",
        "batchNumber": "1056",
        "maxPalletCube": "1982179262",
        "billingFlag": "N",
        "orderDetailsList": [],
        "id": 2385,
        "createdDate": "Aug 11, 2010 6:54:48 PM",
        "createdUser": "USER",
        "lastModifiedDate": "Aug 13, 2010 10:12:21 AM",
        "lastModifiedUser": "USER"
    }
]

and my jqGrid is like this

jQuery("#list10").jqGrid({
    url: '/cpsb/json/test.json',
    datatype:'json',
    colNames:['Order','Load', 'Gate Time', 'Stop','Customer','Status'], 
    colModel:[  
        {name:'orderNumber',index:'orderNumber', width:55, sorttype:"int"},
        {name:'loadNumber',index:'loadNumber', width:100, sorttype:"int"},
        {name:'latestTime',index:'latestTime', width:80, align:"right",
         sorttype:"date", formatter:"date"}, 
        {name:'stopSeq',index:'stopSeq', width:80, align:"right", sorttype:"int"},
        {name:'customerNumber',index:'customerNumber', width:130,align:"right",
         sorttype:"int"},
        {name:'orderStatus',index:'orderStatus', width:150, sortable:true} ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager10',
    sortname: 'Gate Time',
    sortorder: "desc",
    viewrecords: true,
    multiselect: true,
    caption: "Order Header"
});

What I am doing wrong in here...any idea

score 1 · Answer 1 · answered Aug 23 '10 at 17:55

1

Your JSON is wrong. You've included the data only, not any of the other info the grid requires (record count, page count, etc.). You must use one of these formats.

answered Aug 23 '10 at 17:55

Craig Stuntz

125,891
12
252
273

But I don't have problem rendering the JSON data inside my EXT JS grid. SO the data which I am fetching from server side need to send me other info as well? – Paul Aug 23 '10 at 18:34
1

You need to read the documentation and send data in the format required by the grid. I can't make it any more clear than that. – Craig Stuntz Aug 23 '10 at 18:54

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

You should use jsonReader as function (see jquery with ASP.NET MVC - calling ajax enabled web service and http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function).

jsonReader : {repeatitems: false,
    root: function(obj) {
        return obj;
    },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

Another problem is that the data from the latestTime are not corresponds to data needed for the formatter:"date". To fix the problem you can try to use srcformat and newformat http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#predefined_format_types, but I am not sure if it is possible. It seems to me that only numeric date formats are supported.

In the example http://www.ok-soft-gmbh.com/jqGrid/ReadJsonData3.htm I just commented the date format of latestTime. How can see the problem with reading of data can be solved with respect of jsonReader which I suggested.

edited May 23 '17 at 12:19

Community

1
1

answered Aug 23 '10 at 18:37

Oleg

220,925
34
403
798

`jsonReader` as function is a nice feature if you want to read the data in the existing format provided by server. If you do able to make any changes in the server code you should better prepare the data for jqGrid. If makes you possible to use data paging, filtering (searching) and moreover reduce the size of data transfered. – Oleg Aug 23 '10 at 19:58
thanks! a ton ...its working now when I am using as a function.. One more question.. If you see my json file you will see OrderDetailsList.. Its a list which need to be populated on row click from this present grid on a different grid below this grid ...any idea how can I achieve that... – Paul Aug 23 '10 at 21:10
I am not sure what you exactly want, but to be able to use `OrderDetailsList` you need to save the data somewhere. jqGrid supports `loadComplete` event which has one parameter `data` (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#list_of_events). The `data` is deserialized object represented the data received from the server. For example, `data[i].orderDetailsList` will represent the `OrderDetailsList` from the item with the index `i`. You can save the data somewhere and then use `onSelectRow` event to use the data and refresh the "detail" grid. – Oleg Aug 23 '10 at 21:29
this is like a master details example ....i am planning to create a another action class which will be trigger on rowSelect from first grid ...one more question ..When we are submitting the selected rows to server do I need to send the rows as JSON objects and have to configure it so that my action class will send it to database ? or there is a another way to achieve it? – Paul Aug 23 '10 at 22:12
You can request the data for the detail grid adding for example id from selected row from the master grid to the url of detailed grid. The best way is the usage of `postData` parameter of detailed grid. If you use this together with HTTP GET, `postData` parameter will be forwarded as data to `jQuery.ajax` and the url will be appended with the additional parameter ('?' or '&' will be added if needed). It you use HTTP POST, `postData` parameter will be used to post an additional parameter. But it is only one way. One can choose some other depends on the project requirements. – Oleg Aug 23 '10 at 22:28
Thanks a ton.. I will try with postData approach ..did n't worked on postData , so need to read the documentation and have to go through couple of examples... – Paul Aug 24 '10 at 13:02

problem getting json data inside my JqGrid

2 Answers2