jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Trying to get the most basic sample working

13/01/2010
18:48

ripster

New Member

Members

Forum Posts: 2

Member Since:
13/01/2010

Offline

Hi there,

I'm pretty much a newbie with jquery and jqgrid. I'd like to get a very simple example working but I am having problems.

I have downloaded a custom version of jqgrid by going to the download page and selecting all options so that my header is:

* jqGrid 3.6.2 - jQuery Grid

* http://www.gnu.org/licenses/gpl.html

* Date:2009-12-10

* Modules: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; jquery.searchFilter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.treegrid.js; grid.import.js; JsonXml.js; grid.setcolumns.js; grid.postext.js; grid.tbltogrid.js; grid.jqueryui.js;

I have then put together a very basic html page based on the demo "Loading Data->Array Data". Here is the html page that I am using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

head>

link type="text/css" rel="Stylesheet" href="jquery-ui-1.7.2.custom.css" />

link type="text/css" rel="Stylesheet" href="ui.jqgrid.css" />

script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>

script type="text/javascript" language="javascript" src="jquery-ui-1.7.2.custom.js"></script>

script type="text/javascript" language="javascript" src="jquery.jqGrid.min.js"></script>

script type="text/javascript" language="javascript" src="grid.locale-en.js"></script>

script type="text/javascript" language="javascript">

function

LoadGrid()

{

"#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>

input type="button" value="Load Grid" onclick="javascript:LoadGrid();"/>

p></p>

table id="list4"></table>

body>

html>

I have all of the above js files in the same folder as the html page and I am launching the page by simply double-clicking on it from windows explorer.

When I click the button I get an error in IE8 'Object doesn't support this property or method' which (when I launch the debugger) tells me the error is on the fragment:

$("#cb_"+$.jgrid.jqID(ts.p.id),this).bind("click",function(){

From what I can tell the null ref is the $.jgrid.jqID function.

Looking at the jquery.jqGrid.min.js file, from what I can tell the section of code which adds the jsID function definition is called by $.extend at the very beginning of the file.

Can anyone help me out with what I need to do to get a simple example working.

TIA

Colin

14/01/2010
20:21

newperson

Member

Members

Forum Posts: 27

Member Since:
28/12/2009

Offline

Check this out http://www.trirand.net/demophp.aspx, this is extremely simple to follow and it differs greatly from what you are using. It is still in Beta but they are doing some good things with it.

14/01/2010
22:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

@newperson Thanks.

@ripster

Thanks I will check your code and let you know.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

21/01/2010
18:22

ripster

New Member

Members

Forum Posts: 2

Member Since:
13/01/2010

Offline

Hi,

I have solved my problem. I was loading the jquery.jQGrid.min.js file before the grid.locale-en.js file, once I swapped them around my page worked.

Cheers,

Colin

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
34 Guest(s)

Currently Browsing this Page:
1 Guest(s)