jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Can't get grid to display JSON data...

Tags: jqgrid json data addJSONData

10/09/2010
01:58

simspace

Member

Members

Forum Posts: 12

Member Since:
01/09/2010

Offline

Hi,

I need to load my jqGrid manually, so I am not using the url parameter in the grid.

I get my data back from the server as JSON.

I can't get the grid to display the data. Would you please tell me what I may be doing wrong in the code below?

Thanks!

Chris

Here's my sample JSON data:

[{"id":40,"email":"some@email.org","name":"rick tester","comment":"some comment text","phone":"555-666-7777"}]

Here's my code to load the grid:

$j("#leadlist").jqGrid('addJSONData', varJsonData); // varJsonData contains the json data from the server...

Here's my grid

$j("#leadlist").jqGrid({

datatype: 'json',

altRows:true,

colNames:['id', 'name','email','phone','comment'],

colModel :[

{name:'id', index:'id', key:true, formatter:'integer', sorttype:'int', width:55},

{name:'name', index:'name', width:150},

{name:'email', index:'email', width:150, sortable:false},

{name:'phone', index:'phone', width:100, align:'center', sortable:false},

{name:'comment', index:'comment', width:150, sortable:false}

jsonReader : {

root: function (obj) { return obj; },

cell: function (obj) { return obj; },

page: function (obj) { return 1; },

total: function (obj) { return 1; },

records: function (obj) { return obj.length; }

ondblClickRow: function(rowid, rowndx, colndx, objEvent)

{

top.location.href = '/counselor-hub/lead-profile/id/'+rowid;

width:750,

height:400,

pager: '#leadpager',

rowNum:30,

rowList:[15,30,60,100],

sortname: 'name',

sortorder: 'desc',

viewrecords: true,

caption: 'Leads'

});

10/09/2010
04:47

mikeerickson

Huntington Beach, CA

Member

Members

Forum Posts: 34

Member Since:
29/06/2010

Offline

Does the grid display and it just has empty data, or does the grid not even display.

A few things:

1. Format JSON should be

{"name":"value","name2":"value2"}

I have the following construct that works just fine (loads file from a file containing JSON data)

$("#masterList").jqGrid({

url: "sample.json",

datatype: "json",

colNames: ['Inv','Date', 'Client', 'Amount','Tax','Total','Notes'],

colModel:[

{name:'id',index:'id', width:60, editable:true, sorttype:'int',align:"center"},

{name:'invdate',index:'invdate', width:90, sorttype:'date', formatter:'date', datefmt:'d/m/Y',align:"center"},

{name:'name',index:'name', width:100},

{name:'amount',index:'amount', width:80, align:"right", sorttype:'number',formatter:'currency'},

{name:'tax',index:'tax', width:80, align:"right",sorttype:'number',formatter:'currency'},

{name:'total',index:'total', width:80,align:"right",sorttype:'number',formatter:'currency'},

{name:'note',index:'note', width:120, sortable:false,editable:true}

rowNum: 10,

forceFit: true,

rowList: [5,10,20,30],

loadonce: true,

height: 200,

width: 640,

pager: '#masterPager',

sortname: 'id',

viewrecords: true,

sortorder: "desc",

});

mse

10/09/2010
17:34

simspace

Member

Members

Forum Posts: 12

Member Since:
01/09/2010

Offline

Thanks for your reply.

My json data is in the {"name":"value","name2″:"value2″} format. I ran the data through jsonlint.com and it is valid json. You think the array brackets messing up the grid?
Also, I'm not loading my json data from a file. I'm getting the data off the http response. As a result I need to call the jqGrid method "'addJSONData'" to load the data into the grid. That is why there is no url parameter on my grid as shown above.

Any ideas what may be wrong with my code above?

Thanks!

Chris

10/09/2010
18:07

simspace

Member

Members

Forum Posts: 12

Member Since:
01/09/2010

Offline

Maybe I should explain my situation a little better…

* I have a search page with multiple fields.

Not all fields are required, so there can be any combo of 1 to 7 fields.

* The search page is submitted, sending json formatted data back to the server.

This data is the SQL WHERE clause parameters.

* The SQL is executed on the server.

* The grid page is sent back from the server with the JSON formatted DB results in the http response.

* The $j(document).ready function fires to display the datagrid and run the code to load the grid…
$j("#leadlist").jqGrid('addJSONData', json-data-from-httpResponse);

* You may be asking "how does the json-data-from-httpResponse get added to the 'addJSONData' call?" The code above, that calls the 'addJSONData' method is built dynamically on the server before the grid page s returned to the client. This is the server-side Coldfusion/Mach-ii code to returns the grid page. What is not shown is the js code for the grid itself.

<cfoutput>
   <script type="text/javascript">
   $j("##leadlist").jqGrid('addJSONData', '#event.getArgs().jsonDataToBeReturned#');
   </script>
   <table id="leadlist"></table>
   <div id="leadpager"></div>
</cfoutput>

So…

The search and datagrid pages are two separate pages… two separate http requests.
The SQL WHERE clause is built dynamically using the data from the submitted search page.
Using JavaScript, I need to load the grid from the HTTP response that builds the datagrid page.

Sorry for all the detail. I just wanted to clarify my situation.

Thanks!

Chris