jQuery Grid Plugin - jqGrid - Topic: css problem http://www.trirand.com/blog/?page_id=393/help/css-problem Simple:Press Version 5.7.5.3 ycceric on css problem http://www.trirand.com/blog/?page_id=393/help/css-problem#p2940 Help http://www.trirand.com/blog/?page_id=393/help/css-problem#p2940 <!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">

]]> Wed, 05 Nov 2008 21:47:43 +0200 ycceric on css problem http://www.trirand.com/blog/?page_id=393/help/css-problem#p2925 Help http://www.trirand.com/blog/?page_id=393/help/css-problem#p2925 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>

]]> Wed, 05 Nov 2008 05:07:35 +0200