Forum
Log In
Home
Topic RSS
05:07
05/11/2008
Offline
what css should i involve when i click Hide/Show Columns? i get a ugly layout...can you give me some suggestion of what i have to be included in the code?
here is the code:
<html>
<head>
<title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/coffee/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<style>
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
width: 100%;
height: 100%
}
/*Splitter style */
#Splitter {
/* min-width: 600px;*/ /* Splitter can't be too thin ... */
min-height: 300px; /* ... or too flat */
margin: .1em .1em .1em .1em;
border: 4px solid #83B4D8; /* No padding allowed */
}
#LeftPane {
width: 200px; /* optional, initial splitbar position */
min-width: 50px; /* optional */
max-width: 350px;
background: #F8F8FF;
padding: 2px;
overflow: hidden;
white-space: nowrap;
}
/*
* Right-side element of the splitter.
*/
#RightPane {
background: #F8F8FF;
padding: 2px;
overflow: auto;
width:700px;
min-width: 500px;
}
/*
* Splitter bar style; the .active class is added when the
* mouse is over the splitter or the splitter is focused
* via the keyboard taborder or an accessKey.
*/
#Splitter .vsplitbar {
width: 4px;
background: #83B4D8 url(images/vgrabber.gif) no-repeat center;
}
#Splitter .vsplitbar.active, #Splitter .vsplitbar:hover {
background: #c66 url(images/vgrabber.gif) no-repeat center;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
</head>
<body>
<div id="Splitter">
<div id="LeftPane">
</div> <!-- #LeftPane -->
<div id="RightPane">
<div id="mainPanelArea" class="tabPanel" ></div>
<a href="#" id="vcol">Hide/Show Columns</a>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<a href="javascript:void(0)" id="m1">Get Selected id's</a>
<a href="#" id="a1">Get data from selected row</a>
</div> <!-- #RightPane -->
</div> <!-- #Splitter -->
</div>
<script type="text/javascript">
var gridimgpath = 'themes/basic/images';
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'server.php',
datatype: 'json',
mtype: 'GET',
colNames:['A','B', 'C','D','E','F'],
colModel :[
{name:'id', index:'id', width:55},
{name:'price', index:'price', width:90,editable:true},
{name:'catid', index:'catid', width:80, align:'right',editable:true},
{name:'name', index:'name', width:80, align:'right',editable:true},
{name:'description', index:'description', width:80, align:'right',editable:true},
{name:'color', index:'color', width:150, sortable:false,editable:true} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
multiselect: true,
sortname: 'id',
cellsubmit: 'clientArray',
sortorder: "desc",
onclickSubmit : function(eparams) {
alert("1");
},
viewrecords: true,
imgpath: 'themes/coffee/images',
gridimgpath: 'themes/coffee/images',
caption: 'My first grid',
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
},
afterSaveCell : function(rowid,name,val,iRow,iCol) {
if(name == 'price') {
var amtval = jQuery("#list").getCell(rowid,iCol+1);
jQuery("#list").setRowData(rowid,{color:parseFloat(val)+parseFloat(amtval)});
}
}
}).navGrid('#pager',{
edit:false,
add:false,
del:false,
search:false }).navButtonAdd('#pager',{
caption:"Add", buttonimg:"themes/coffee/images/row_add.gif",
onClickButton: function(){
alert("Adding Row")
}, position:"last"
}).navButtonAdd('#pager',{
caption:"Del", buttonimg:"themes/coffee/images/row_delete.gif",
onClickButton: function(id){
var selecteditem = jQuery("#list").getGridParam('selarrrow');
//alert(jQuery("#list").getGridParam('selrow'));
alert(jQuery("#list").getGridParam('selarrrow'));
//var itemList = new Array();
//itemList = selecteditem.split(",");
//for (var i=0;i<itemList.length;i++)
jQuery("#list").delGridRow('1');
}, position:"last" });
});
jQuery("#a1").click( function(){
var id = jQuery("#list").getGridParam('selrow');
if (id) {
var ret = jQuery("#list").getRowData(id);
alert("id="+ret.id+" invdate="+ret.invdate+"...");
} else { alert("Please select row");}
});
jQuery("#m1").click( function() {
var s;
s = jQuery("#list").getGridParam('selarrrow');
alert(s);
});
jQuery("#vcol").click(function (){
jQuery("#list").setColumns();
});
</script>
</body>
</html>
21:47
05/11/2008
Offline
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....tional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Most Users Ever Online: 715
Currently Online:
83 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
