Mental Paging Space: Jdgrid Pager Problem

Trying out the latest versions of jquery/jquery ui/jqgrid, and just cannot get the formatting right.

Lets see if we can figure out whats going on.

The html for the grid:

<html>
<head>
  <title> Airstate </title>
</head>
<body>
<h2> Airstate </h2>
<script src="javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="javascripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.layout.js" text="text/javascript"></script>
<script src="javascripts/jqModal.js" type="text/javascript"></script>
<script src="javascripts/jqDnR.js" type="text/javascript"></script>
<script src="javascripts/jquery.jqGrid.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<style>
html, body {
    margin: 0;            /* Remove body margin/padding */
    padding: 0;
    overflow: hidden;    /* Remove scroll bars on browser window */    
    font-size: 75%;
}
/*Splitter style */


#LeftPane {
    /* optional, initial splitbar position */
    overflow: auto;
}
/*
 * Right-side element of the splitter.
*/

#RightPane {
    padding: 2px;
    overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
</style>

<script type="text/javascript">
var listlastsel;jQuery(document).ready(function(){
jQuery("#list").jqGrid({
   url:'airstate.xml',
   editurl:'airstate',
   datatype: 'xml', 
   mtype: 'GET',
   colNames:['Id','Created on','Whom','Logmessage'],
   colModel :[
      {name: 'id',index:'id',key:true,width:80,align:'right'},
      {name: 'created_on',index:'created_on',key:false,width:90},
      {name: 'whom',index:'whom',key:false,width:300,align:'left',editable:true},
      {name: 'logmessage',index:'logmessage',key:false,width:300,align:'left',editable:true}],
   pager: jQuery('#list-pager'),
   onSelectRow: function(id){
     if(id && id!==listlastsel){
        jQuery('#list').restoreRow(listlastsel);
        jQuery('#list').editRow(id,true);
         listlastsel=id;
         }
      },
   autowidth: true,
   rowNum:10,
   rowList:[10,20,30],
   sortname: 'id',
   sortorder: "desc",
   viewrecords: true,
   imgpath: 'themes/basic/images',
   caption: 'Airstate',
   xmlReader: {root: "root",
                row: "syslog",
                page:"root>page",
                total:"root>total",
                records:"root>records",
                repeatitems:false
},
  });
jQuery("#list").navGrid('#list-pager',{ edit:true,add:true,del:true,search:true });
});
</script>
<div id="list-pager" class="scroll"></div>
<table id="list" class="scroll"></table>

</body>
</html>

Now lets see if we can figure out whats going on.

Ok, Great support from jdquery. Seems like its a a bug in the latest v2 alfa test.
Alfa 3 should solve the problem.

Mental Paging Space

Wednesday, April 29, 2009

Jdgrid Pager Problem

No comments: