navGrid no funciona con JQGrid

Question

Tengo una aplicación asp.net MVC y estoy tratando de hacer que jqgrid 3.5 funcione en ella. Mi cuadrícula no usa funciones de paginación, pero quiero usar la barra de navegación de la página para los botones de edición. Mi cuadrícula dentro de un control de pestaña jquery en una página de contenido. Mostrar mis datos funciona bien en la cuadrícula, pero cuando agrego la extensión .navGrid () y las opciones, interrumpe la visualización de la cuadrícula (las pestañas desaparecen) y no se muestran botones. Aquí está mi declaración de grilla: ¿alguien puede ver lo que me falta? ¿O hay una manera de determinar qué está causando que esto se rompa? Estoy bastante desesperado por hacer que esto funcione. Gracias de antemano.

<script type="text/javascript">
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();
});

Answer 1

OK - Intenté jugar con la sintaxis de otros ejemplos publicados y conseguí que funcionara - no hay opciones de visualización.

 }).navGrid('#sandgridp',
{}, //options
{reloadAfterSubmit:false}, // edit options
{reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);

Answer 2

Asegúrese de incluir la función de búsqueda de edición de formularios en su descarga; de lo contrario, la función navGrid no se definirá.