Forum
Log In
Home
Topic RSS
05:15
06/11/2009
Offline
Hello all,
I started with JQGrid by extracting the integrated search toolbar sample from the demo, but while it works perfect in the demo, my own instance does not. Whenever I click the toggle button, I get the following JavaScript error:
mygrid[0].toggleToolbar is not a function
Can anybody tell me what I missed?
Here's my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.searchFilter.css"/>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"/>
<script src="js/grid.loader.js" type="text/javascript"/> <!-- loads all features -->
<script type="text/javascript">
$(document).ready(function(){
var gridimgpath = 'themes/basic/images';
var mygrid = jQuery("#s3list").jqGrid({
url:'search.php?q=1',
datatype: "json",
width: 700,
colNames:['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel:[{name:'id', index:'id', width:65 },
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right", stype:'select', editoptions:
{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}],
rowNum:10,
mtype: "POST",
rowList:[10,20,30],
imgpath: gridimgpath,
pager: '#s3pager',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
gridview : true,
caption:"Toolbar Search Example", })
.navGrid('#s3pager', {edit:false,add:false,del:false,search:false,refresh:false})
.navButtonAdd("#s3pager",
{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
onClickButton:function(){ mygrid[0].toggleToolbar() }})
.navButtonAdd("#s3pager",
{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
onClickButton:function(){ mygrid[0].clearToolbar() }});
mygrid.filterToolbar();
});
</script>
</head>
<body>
<table id="s3list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="s3pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
09:48
Moderators
30/10/2007
Offline
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.
Most Users Ever Online: 715
Currently Online:
60 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
