tags:

views:

206

answers:

2

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

A: 

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.

Craig Stuntz
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
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
A: 

You should use jsonReader as function (see http://stackoverflow.com/questions/2835957/jquery-with-asp-net-mvc-calling-ajax-enabled-web-service/2836817#2836817 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.

Oleg
Thanks! I will try with jsonReader as function ....
Paul
`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
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
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
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
Oleg
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