title: jqGrid with JSON data renders table as empty
body: <p>I'm trying to create a jqgrid, but the table is empty.  The table renders, but the data doesn't show.</p>
  
  <p>The data I'm getting back from the php call is:</p>
  
  <pre><code>{
  "page":"1",
  "total":1,
  "records":"10",
  "rows":[
  {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
  {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
  {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
  {"id":"2:4","cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
  {"id":"2:5","cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
  {"id":"2:6","cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
  {"id":"2:7","cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
  {"id":"2:8","cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
  {"id":"2:10","cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
  {"id":"2:11","cell":["11","image","World Conservation","World Conservation Badge","0"]}
  ]}
  </code></pre>
  
  <p>The javascript configuration looks like so:</p>
  
  <pre><code>$("#"+tableId).jqGrid ({
      url:'getAwards.php?id='+classId,
      dataType : 'json',
      mtype:'POST',
      colNames:['Id','Badge','Name','Description',''],
      colModel : [
          {name:'awardId', width:30, sortable:true, align:'center'},
          {name:'badge', width:40, sortable:false, align:'center'},
          {name:'name', width:180, sortable:true, align:'left'},
          {name:'description', width:380, sortable:true, align:'left'},
          {name:'selected', width:0, sortable:false, align:'center'}
          ],
      sortname: "awardId",
      sortorder: "asc",
      pager: $('#'+tableId+'_pager'),
      rowNum:15,
      rowList:[15,30,50],
      caption: 'Awards',
      viewrecords:true,
      imgpath: 'scripts/jqGrid/themes/green/images',
      jsonReader : { 
          root: "rows", 
          page: "page", 
          total: "total", 
          records: "records", 
          repeatitems: true, 
          cell: "cell", 
          id: "id",
          userdata: "userdata", 
          subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
      },
      width: 700,
      height: 200
  });
  </code></pre>
  
  <p>The HTML looks like:</p>
  
  <pre><code>&lt;table class="awardsList" id="awardsList2" class="scroll" name="awardsList" /&gt;
  &lt;div id="awardsList2_pager" class="scroll"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure that I needed to define jsonReader, since I've tried to keep to the default.  If the php code will help, I can post it too.</p>