title: Displaying a Blank JQGrid with Column Headers
body: <p>I want to display JQGrid with all column headers but without any data rows when the page loads.</p>
  
  <p>Based upon user selection through autocomplete i want to populate the JqGrid with data.</p>
  
  <p>The problem is that each time during pageload the grid is automatically populated. </p>
  
  <p>How can i get around this ?</p>
  
  <p>This is how i am using the grid with VS2008 MVC2</p>
  
  <pre><code>jQuery('#jgrid').jqGrid({
      autowidth: true,
      altRows: true,
      altclass: 'grdAltRwClr',
      datatype: 'xml',
      forceFit: true,
      gridview: true,
      height: 290,
      mtype: 'post',
      rowList: [10, 20, 30],
      rowNum: 10,
      pager: '#pager',
      pagerpos: 'right',
      recordpos: 'left',
      rownumbers: false,
      scrollrows: false,
      sortname: 'roledtlid',
      toolbar: [true, "top"],
      url: rootPath + 'RoleDetail/JGridData',
      beforeSelectRow: function(rowid, e) { return false; },
      gridComplete: function() { GridComplete() },
      colModel: [
            { name: 'act', label: 'View', resizable: false, search: false, sortable: false, title: false, width: 6, index: 'act' }
          , { name: 'roledtlid', label: 'R.Detail id', width: 15, index: 'roledtlid' }
          , { name: 'roleid', label: 'Role id', width: 10, index: 'roleid' }
          , { name: 'rolename', label: 'Role Name', width: 25, index: 'rolename' }
          , { name: 'pageid', label: 'Page ID', width: 10, index: 'pageid' }
          , { name: 'pgname', label: 'Page Name', width: 30, index: 'pgname' }
          , { name: 'canadd', label: 'Add', width: 10, index: 'canadd' }
          , { name: 'canedit', label: 'Edit', width: 10, index: 'canedit' }
          , { name: 'candel', label: 'Delete', width: 10, index: 'candel' }
          , { name: 'canview', label: 'View', width: 10, index: 'canview' }
           ]
  });
  </code></pre>
  
  <p>Thanks</p>