<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/script/themes/base/ui.all.css">
<link rel="stylesheet" href="/script/jqgrid.4.2.0/css/ui.jqgrid.css">
<style>
BODY {
   margin-top: 0px;
   margin-bottom: 4px;
   }
</style>
<script src="/script/jquery.js"></script>
<script src="/script/jqgrid.4.2.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/script/jqgrid.4.2.0/js/jquery.jqGrid.min.js"></script>
<script>
function formatter(x)
{
   var ar1=x.toString().split('.');
   while (ar1.length<2) {
      ar1.push('0');
   }
   if (ar1[1].length>2) {
      ar1[1]=ar1[1].substr(0,2);
   }
   while (ar1[1].length<2) {
      ar1[1] += "0";
   }
   
   return ar1.join('.');
}

var mystr = "<?xml version='1.0' encoding='utf-8'?"+">"+
"<invoices>"+ 
    "<rows>";
for (var i=0;i<120;i++) {

   var val=Math.random()*1000000;
   var tax=val*0.23;
   var tot=val+tax;
   
   mystr +=  
        "<row>"+ // if no id is specified, id is numeric, strting from 1  
            "<cell>data."+i+".1</cell>"+ 
            "<cell>data."+i+".2</cell>"+ 
            "<cell>"+formatter(val)+"</cell>"+ 
            "<cell>"+formatter(tax)+"</cell>"+ 
            "<cell>"+formatter(tot)+"</cell>"+ 
            "<cell>data."+i+".6</cell>"+     
        "</row>";
}
mystr +=         
    "</rows>"+ 
"</invoices>";

var fgrT=null;
var h1,w1;
function afterGResize(i)
{    
   fgrT=null;
   /*
   var ogrid=gridID2[i];
   ogrid.setSizes();
   */
   $('#lista').jqGrid('setGridHeight', h1);
   $('#lista').jqGrid('setGridWidth', w1);
}
function forGResize()
{     
   var n=1; //gridID2.length;
   var ogrid;
   
   for (var i=0;i<n;i++) {
      //ogrid=gridID2[i];

      var odiv=document.getElementById('gbox_lista');
      if (odiv==null)
         continue;
         
      if (fgrT!=null) {
         window.clearTimeout(fgrT);
      }
      
      var pobj=$(odiv).parent(':not(form)').get(0);
      if (!pobj || (pobj.tagName && pobj.tagName=='BODY')) {
         // Set width
         var go = $(odiv).offset();
         w1 = $(window).width() - 2 * go.left;
         
         // Set height
         var wh = $(window).height(); 
         var delta = $(odiv).outerHeight() - $('#lista').jqGrid('getGridParam', 'height'); 
         h1 = wh - $(odiv).offset().top - delta - 14; // height of cells area
      }
      else {
         // Set width   
         w1 = $(pobj).innerWidth() - 2;
         
         // Set height
         var wh = $(pobj).height();   
         var delta = $(odiv).outerHeight() - $('#lista').jqGrid('getGridParam', 'height'); 
         h1 = wh - delta; // height of cells area 
      }
      
      
      /*
      if (document.getElementById('tbar2')) {
         var delta = $(odiv).outerHeight() - $(odiv).height(); 
         h1 = wh - $(odiv).offset().top - $('#tbar2').outerHeight() - delta - 1;
      }
      else {
         var bmargin = ogrid._ibottom_margin+5;
	      h1 = wh - $(odiv).offset().top - bmargin;
      }
      */
      if (h1<200) { h1=200; }
      
      $('#lista').jqGrid('setGridWidth', w1-40);
      $('#lista').jqGrid('setGridHeight', h1-40);
      
      // force grid redraw
      fgrT=window.setTimeout( 'afterGResize('+i+')', 100);
   }
}


$(function(){ 
  var og = $("#lista").jqGrid({
    //url:'example.php',
    datatype: 'xmlstring',
    datastr : mystr,
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right', sorttype:'float'}, 
      {name:'tax', index:'tax', width:80, align:'right', sorttype:'float'}, 
      {name:'total', index:'total', width:80, align:'right', sorttype:'float'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#tbar2',
    rowNum:25,
    rowList:[10,20,30,40],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'My first grid',
    hidegrid: false,
    rownumbers: true,
    //autowidth: true,
    width: 640,
    height: 400,
    onSelectRow: function(rowid, status) {
      alert('id='+rowid+' status='+status);
    },
    toolbar: [true,"top"]
  });
  
  $(window).resize( forGResize );
  $(window).load( forGResize );
  
  /*
  var s1='';
  for (var p in og) {
   s1 += p+'='+og[p]+"\n"; 
  }
  $('#msg').text(s1);
  */
   
}); 
</script>
</head>

<body>

<div style="background-color:#e0e0e0">
   <h1>INCA sample</h1>
   <a href="test1.php?F=0">Full page</a> | <a href="test1.php?F=1">In table</a>
</div>

<?php
switch ((int)@$_REQUEST['F'])
{
case 0:
   echo <<<EOT
<table id="lista"><tr><td></td></tr></table> 
<div id="tbar2"></div>
EOT;
   break;
case 1:
   echo <<<EOT
<table width="100%" cellspacing=0 cellpadding=0>
<tr>
<td style="height:500px; overflow:hidden; background-color: #FF0000">
   <table id="lista"><tr><td></td></tr></table> 
   <div id="tbar2"></div>
</td>
<td width=200>
   <h2>The right part</h2>
</td>
</tr>
<tr>
   <td colspan=2><h2>The lower part</h2></td>
</tr>
</table>   
EOT;
   break;
}
?> 

</body>
</html>