title: navGrid not working with JQGrid
body: <p>I have a asp.net MVC app and I'm trying to get the jqgrid 3.5 to work in it. My grid does not use paging features but I want to use the page navigator bar for edit buttons. My grid within a jquery tab control on a content page. Displaying my data works fine in the grid but when I add the .navGrid() extension and options to it it breaks the display of the grid (tabs go away) and no buttons are displayed. Here is my grid declaration - can anyone see what I'm missing. Or is there a way to determine what is causing this to break. I'm pretty desparate to get this working - Thanks in advance.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
      jQuery("#sandgrid").jqGrid({
          url: '/EquipTrack/GridData/',
  
      editurl: '/EquipTrack/Edit/', 
          datatype: 'json',
          mtype: 'GET',
  
          height: 255,
          width: 755,
          rowNum: 5000,
          colNames: ['ID', 'Type', 'Make', 'Model', 'Year', 'Location', 'Insp Due', 'Serv Due', 'Miles/Hrs', 'Milage Dt', 'Reg By', 'Mngd By', 'Tag Exp',''],
          colModel: [
           { name: 'equip_id', index: 'equip_id', width: 65, editable: true },
           { name: 'type_desc', index: 'type_desc', width: 130, editable: true },
           { name: 'make_descr', index: 'make_descr', width: 80, editable: true },
           { name: 'model_descr', index: 'model_descr', width: 80, editable: true },
           { name: 'equip_year', index: 'equip_year', width: 60, editable: true },
           { name: 'work_loc', index: 'work_loc', width: 130, editable: true },
           { name: 'insp_due_dt', index: 'insp_due_dt', width: 100, editable: true },
           { name: 'service_due_num', index: 'service_due_num', width: 80, editable: true },
           { name: 'miles_hours', index: 'miles_hours', width: 80, editable: true },
           { name: 'miles_dt', index: 'miles_dt', width: 100, editable: true },
           { name: 'registered_by', index: 'registered_by', width: 80, editable: true },
           { name: 'managed_by', index: 'managed_by', width: 80, editable: true },
           { name: 'tag_expire_dt', index: 'tag_expire_dt', width: 100, editable: true },
           { name: 'inspection_warn', index: 'tag_expire_dt', width: 0, hidden:true}],
  
          sortname: 'equip_id',
          sortorder: "asc",
          afterInsertRow: function(rowid, rowdata, rowelem) {
              if (rowelem[13] == 'SET_RED') {
                  jQuery("#sandgrid").setCell(rowid, 'insp_due_dt', '', { color: 'red' })
              }
          },
          viewrecords: true,
          pager: jQuery('#sandgridp'),
          caption: 'Inventory'
  
      }).navGrid('#sandgridp',
       {view:true}, //options
        {height:290,reloadAfterSubmit:false, jqModal:false, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"}, // edit options
        {height:290,reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:"Fields marked with (*) are required"}, // add options
        {reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
        {closeOnEscape:true}, // search options
        {height: 250, jqModal: false, closeOnEscape: true} // view options
        );
  
      $('#sandgridp_center').remove();
      $('#sandgridp_right').remove();
  });
  </code></pre>
  
  <p></p>