jqGrid with Phalcon

Hello,

I am trying to use jqGrid with Phalcon, stuck at the first step. I have placed the Javascript code in volt template between divs

<div style="height: 500px; overflow: scroll;">
<script type="text/javascript">
    $(document).ready(function () {
        jQuery("#list4").jqGrid({
          datatype: "local",
          height: 250,
          colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
          colModel:[
              {name:'id',index:'id', width:60, sorttype:"int"},
              {name:'invdate',index:'invdate', width:90, sorttype:"date"},
              {name:'name',index:'name', width:100},
              {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}     
          ],
          multiselect: true,
          caption: "Manipulating Array Data"
      });
      var mydata = [
              {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
              {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
              {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
              {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
              {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
              {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
              {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
              {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
              {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
              ];
      for(var i=0;i<=mydata.length;i++)
          jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
  });
</script>
  <table id="list4"></table>  
</div>

and HTML after this script as below:

<table id="list4"></table>

I have included all the jqGrid and jQuery css & js files. If I put this code in a plain index.html or index.php file, it works. When I put it in between a div pair in a volt template, nothing shows up. I searched the net and this forum, nothing on jqGrid. Has anybody implemented anything with jqGrid and would they be willing to share some knowledge.

Basic tutorial is here. Choose "Loading Data"->"Array Data" to see above code in the demo.

Thanks Amal