title: jqgrid sample using array data, what am I missing
body: <p>I'm new in jqgrid, I'm just trying thes example to work. I have a html file only, nothing more. When I ran this file, array data is not showing. What am I missing here? Thanks in advance.</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;jqGrid Demos&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="lib/jquery-ui-1.7.1.custom.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="lib/ui.jqgrid.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="lib/ui.multiselect.css" /&gt;
      &lt;style type="text/css"&gt;
          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;}
      &lt;/style&gt;
      &lt;script src="lib/jquery-1.4.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery.layout.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery.tablednd.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery.contextmenu.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/ui.multiselect.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          // We use a document ready jquery function.
          jQuery(document).ready(function(){
              jQuery("#list").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}
                  ],
                  pager: '#pager',
                  rowNum:10,
                  rowList:[10,20,30],
                  sortname: 'id',
                  sortorder: 'desc',
                  viewrecords: true,
                  multiselect: true,
                  imgpath: "lib/basic/images",
                  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&lt;=mydata.length;i++)
              jQuery("#list").jqGrid('addRowData',i + 1, mydata1[i]);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table id="list" class="scroll"&gt;&lt;/table&gt;
      &lt;div id="pager" class="scroll" style="text-align:center;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>