Forum


23:06

02/03/2010

Hi I can not seem to get the coloumn reordering to work in my grid. The coloumns are sortable by clicking the header but i am unable to drg the coloumns around. I have included the grid.jqueryui.js and set sortable to true. Any help is appreciated. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....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 First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
<script src="js/src/grid.jqueryui.js" type="text/javascript"></script>
<!--Cell Wrap Around-->
<style>
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#grid").jqGrid({
sortable: true,
resizable:true,
height:700,
autowidth: true,
url:'db.php',
datatype: "json",
mtype: 'GET',
colNames:['ID', 'Variants', 'XTX', 'XT', 'PRO', 'Owner', 'Notes', 'Description'],
colModel:[
{name:'ID',index:'ID', hidden:false, editable:false, width:25},
{name:'Variants',index:'Variants', width:150},
{name:'XTX',index:'XTX', width:70},
{name:'XT',index:'XT', width:70},
{name:'PRO',index:'PRO', width:70},
{name:'Owner',index:'Owner', width:150},
{name:'Notes',index:'Notes', sortable:false, width:300},
{name:'Description',index:'Description', sortable:false, width:700},
],
jsonReader : {
repeatitems:false
},
rowNum:100000000,
rowList:[100000000, 10,20,30],
loadComplete: function()
{
$("option[value=100000000]").text('All');
},
pager: jQuery('#gridpager'),
sortname: 'ID',
viewrecords: true,
sortorder: "asc",
caption:"Wines",
}).navGrid('#gridpager');
});
</script>
</head>
<body>
...
<div id="jqgrid">
<table id="grid"></table>
<div id="gridpager"></div>
</div>
...
</body>
</html>
19:42

Moderators
30/10/2007

Hello,
As described here -
http://www.trirand.com/jqgridw.....y_ui_intro
you must load the jQuery UI library
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:
32 Guest(s)
Currently Browsing this Page:
1 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