Forum
Log In
Home
Topic RSS
01:39
19/03/2010
Offline
Dear Tony,
I love jqGrid. It is absolutely great! I am having a small problem with the pginput control on the pager. The input where one can enter the page to move to is too small compared to the "Page of xx" text.
Below is my code. I think it may have to do with the fact that my page may be inheriting a stylesheet that I am not aware of. Is there a way to ensure that my grid is styled based on jQuery UI and jqGrid?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Loading postgreSQL into jqGrid</title>
<link type="text/css" href="../jquery-ui/1.8/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="../jquery/plugins/jquery.jqGrid-3.6.4/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery-ui/1.8/minified/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery/plugins/jquery.jqGrid-3.6.4/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="../jquery/plugins/jquery.jqGrid-3.6.4/js/jquery.jqGrid.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$( function() {
$('#my_grid').jqGrid({
url:'test.get.sql.data.php',
datatype: 'json',
mtype: 'post',
colNames:[
'Cust No',
'First Name',
'Last Name',
'Address',
'City',
'State',
'Zip',
'Phone'
],
colModel:[
{name: 'cust_no', index: 'cust_no', width: 100, align: 'left' },
{name: 'first_name', index: 'first_name', width: 150, align: 'left' },
{name: 'last_name', index: 'last_name', width: 150, align: 'left' },
{name: 'address', index: 'address', width: 200, align: 'left' },
{name: 'city', index: 'city', width: 200, align: 'left' },
{name: 'state', index: 'state', width: 150, align: 'left' },
{name: 'zip', index: 'zip', width: 100, align: 'left' },
{name: 'phone', index: 'phone', width: 150, align: 'left' }
],
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false
},
altRows: true,
rowNum: 20,
rowList: [10,20,30],
pager: '#my_grid_nav',
viewrecords: true,
sortname: 'cust_no',
sortorder: 'asc',
caption: 'Customers'
});
$('#my_grid').jqGrid('navGrid', '#my_grid_nav',
{
view: true,
edit: false,
add: false,
del: false,
search: true
});
});
</script>
</head>
<body>
<div id="my_div">
<h1>Loading postgreSQL into jqGrid</h1>
<table id="my_grid"></table>
<div id="my_grid_nav"></div>
</div>
</body>
</html>
Thank you,
Frank
19:01
Moderators
30/10/2007
Offline
Hello,
If I copy paste your example everthing seems to be ok. Moreover the grid look little bigger, so I add this
<style type="text/css">
body {margin: 0px;padding:0px;width: 100%;height:100%; font: 62.5% Verdana, sans-serif;}
</style>
and the page look ok.
Also did you have tested it this way. What other styles are included into the page?
Try to include a css code on pieces and see where is the problem.
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.
Most Users Ever Online: 715
Currently Online:
144 Guest(s)
Currently Browsing this Page:
2 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
