navGrid ne fonctionne pas avec JQGrid

Question

J'ai une application asp.net MVC et j'essaie de faire fonctionner jqgrid 3.5. Ma grille n'utilise pas les fonctions de pagination, mais je souhaite utiliser la barre de navigation de la page pour les boutons d'édition. Ma grille dans un contrôle d'onglet jQuery sur une page de contenu. L'affichage de mes données fonctionne correctement dans la grille, mais lorsque j'ajoute l'extension .navGrid () et ses options, l'affichage de la grille est interrompu (les onglets disparaissent) et aucun bouton ne s'affiche. Voici ma déclaration sur la grille - quelqu'un peut-il voir ce qui me manque? Ou existe-t-il un moyen de déterminer la cause de cette rupture? Je suis assez désespéré pour que cela fonctionne - Merci d'avance.

<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 - J'ai essayé de jouer avec la syntaxe d'autres exemples publiés et tout s'est bien déroulé - notez qu'il n'y a pas d'options d'affichage.

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

Answer 2

Assurez-vous d'inclure la fonctionnalité de recherche de modification de formulaire dans votre téléchargement. sinon, la fonction navGrid ne sera pas définie.