jQuery Grid Plugin - jqGridForum

Topic RSS

Rows not being displayed for local or json data

20/04/2010
06:39

sdebaun

Member

Members

Forum Posts: 3

Member Since:
20/04/2010

Offline

I've been beating my head against this all day; I'm hoping this is something stupid that everyone knows about except for me. 🙂

I'm using jquery 1.4.2, jquery-ui 1.8, jqgrid 3.5.3.

I can't get rows to show up in the grid at all. The grid itself displays, with the appropriate column headings. I get the same result in Chrome and in Firefox. Initially, I was using json to get the rows. In my attempts to isolate the problem I've finally ended up using the code straight from the example at:

/blog/jqgrid/jqgrid.html

Under Loading Data: Array Data.

This is driving me nuts. Does anyone have any suggestions? The only thing I can think of now is some sort of incompatibility with the versions of jquery, jquery-ui, and jqgrid.

<html>

<head>

$(document).ready( function() {

jQuery("#list4").jqGrid({

datatype: "local",

height: 250,

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

colModel:[

{name:'id',index:'id', width:60, sorttype:"int"},

{name:'invdate',index:'invdate', width:90, sorttype:"date"},

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

{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},

{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},

{name:'total',index:'total', width:80,align:"right",sorttype:"float"},

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

multiselect: true,

caption: "Manipulating Array Data"

});

var mydata = [

{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}

];

for(var i=0;i<=mydata.length;i++)

jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

});

</script>

</head>

<body>

</body>

</html>

20/04/2010
18:24

sdebaun

Member

Members

Forum Posts: 3

Member Since:
20/04/2010

Offline

Bump?

This has to be something stupid, like library version incompatibility. I'll try switching around what versions I'm using and see if that helps.

UPDATE:

Switched library versions, to no avail.

For shits and giggles, I switched this call:

$("#list4″).jqGrid('addRowData',i+1,mydata[i]);

to this call:

("#list4″).addRowData(i+1,mydata[i]);

and it worked. Wtf.

Now off to wrestle with the json version and see why its not working. 🙂

20/04/2010
20:08

sdebaun

Member

Members

Forum Posts: 3

Member Since:
20/04/2010

Offline

Whiskey Tango Foxtrot.

Apparently this:
{
"total": "2",
"page": "1",
"records": "2",
"rows": [
{
"id": "1",
"cell": ["Michael Smith", "Wanker"]
},
{
"id": "2",
"cell": ["Raymond Shaw", "Also Wanker"]
}
]
}

Is not equivalent to this:
{
total: "2",
page: "1",
records: "2",
rows: [
{
id: "1",
cell: ["Michael Smith", "Wanker"]
},
{
id: "2",
cell: ["Raymond Shaw", "Also Wanker"]
}
]
}

While the JS that defines the grid doesn't require quotes around key names in hashes, the JSON data returned from the server does...?

Well, it's working now. I'm going to go find a baby to punch to relieve my frustration.

24/04/2010
21:09

DadOnRed

Member

Members

Forum Posts: 3

Member Since:
24/04/2010

Offline

Would you mind reposting your current / working code for local array data? I've got a similar problem (not working at all, trying to get through the basic demo code on the site). Appreciate any help here!

Here is what I currently have:

<head>