Come evitare la chiusura del modulo quando si fa clic all'esterno della finestra modale quando si modifica o si aggiunge una nuova riga in JQgrid?

Question

c'è un modo per evitare la chiusura del modulo quando si aggiunge o si modifica una riga. Jqgrid funziona perfettamente nella nostra applicazione, ma c'è un piccolo problema, quando l'utente sta modificando o creando una riga tramite modifica del modulo e l'utente fa clic all'esterno del modale del modulo, la modale si chiude e le modifiche vengono perse. È possibile evitare questo comportamento?

Answer 1

Risolto!

Basta, assicurarsi di impostare il modal: true nella tua modifica griglia o aggiungere opzioni, ma essere sicuri di avere scaricato jqGrid whith editing modale. Vedi http://www.trirand.com/blog/?page_id=6.

Qui è la mia griglia di (cercare // opzioni), ora il modal si chiude solo quando fai clic in Salva o pulsanti annullare:

jQuery("#gridTipo").jqGrid(
      { 

       url : 'obtenerTipoDetallePorTipo.do?idTipo=0', 
       datatype : "json", 

       colNames : [ 'ID', 'Codigo', 'Descripción', 'Tabla', 
         'CodPadre', 'Nombre', 'Idioma' ], 
       colModel : [ { 
        name : 'id', 
        index : 'id', 
        autowidth:true, 
        hidden : true, 
        width : 90, 
        editable : true, 
        editoptions : { 
         readonly : true, 
         size : 10 
        } 
       }, { 
        name : 'codigoTipo', 
        index : 'codigoTipo', 
        autowidth : true, 
        editable : true, 
        formoptions : { 
         rowpos : 2, 
         label : "Codigo", 
         elmprefix : "(*)" 
        }, 
        editrules : { 
         required : true 
        } 
       }, { 
        name : 'descripcionTipo', 
        index : 'descripcionTipo', 
        autowidth : true, 
        editable : true, 
        editoptions : { 
         size : 20 
        }, 
        formoptions : { 
         rowpos : 3, 
         label : "Descripcion", 
         elmprefix : "(*)" 
        }, 
        editrules : { 
         required : true 
        } 
       }, { 
        name : 'tabla', 
        index : 'tabla', 
        autowidth : true, 
        editable : true, 
        formoptions : { 
         rowpos : 4, 
         label : "Tabla", 
         elmprefix : "(*)" 
        }, 
        editrules : { 
         required : true 
        } 

       }, { 
        name : 'codpadre', 
        index : 'codpadre', 
        hidden : true, 
        autowidth:true, 
        editable : true, 
        editoptions : { 
         readonly : true, 
         size : 25, 
         defaultValue : function() { 
          var codPad = jQuery("#codPadreH").val(); 
          return codPad; 
         } 
        } 
       }, { 
        name : 'nombre_tipo', 
        index : 'nombre_tipo', 
        autowidth : true, 
        editable : true, 
        editoptions : { 
         size : 20 
        }, 
        formoptions : { 
         rowpos : 6, 
         label : "Nombre", 
         elmprefix : "(*)" 
        }, 
        editrules : { 
         required : true 
        } 
       }, { 
        name : 'idioma', 
        index : 'idioma', 
        autowidth : true, 
        editable : true, 
        edittype : "select", 
        editoptions : { 
         value : "${idiomasDin}" 
        }, 
        formoptions : { 
         rowpos : 7, 
         elmprefix : "    " 
        } 
       } ], 
       rowNum : 10, 
       pager : jQuery('#pgridTipo'), 
       sortname : 'id', 
       sortorder : "desc", 
       viewrecords : true, 
       width : '620', 
       height : "250", 
       editurl : "doPost.do", 
       shrinkToFit:false, 
       caption : "Administracion Tipos" 
      }).navGrid('#pgridTipo', { 
     add : true, 
     search : false, 
     del : false 
    }, //options 
      { modal: true, 
       height : 220, 
       width : 500, 
       reloadAfterSubmit : true, 
       recreateForm : true, 
       closeAfterEdit : true, 
       beforeInitData : function(FrmGrid_gridTipo) { 
        jQuery("#gridTipo").setColProp('codigoTipo', { 
         editoptions : { 
          readonly : true, 
          size : 20 
         } 
        }); 
        jQuery("#gridTipo").setColProp('tabla', { 
         editoptions : { 
          readonly : true, 
          size : 20 
         } 
        }); 
        jQuery("#gridTipo").trigger('reloadGrid'); 
        //alert("hola"); 
      } 
      }, // edit options 
      { 
       modal: true, 
       height : 220, 
       width : 500, 
       reloadAfterSubmit : true, 
       closeAfterAdd : true, 
       beforeInitData : function(FrmGrid_gridTipo) { 
        jQuery("#gridTipo").setColProp('codigoTipo', { 
         editoptions : { 
          readonly : false, 
          size : 20 
         } 
        }); 
        jQuery("#gridTipo").setColProp('tabla', { 
         editoptions : { 
          readonly : false, 
          size : 20 
         } 
        }); 
        jQuery("#gridTipo").trigger('reloadGrid'); 
        //alert("hola"); 
      }, 
      recreateForm : true 
      }, // add options 
      { 
       reloadAfterSubmit : false 
      }, // del options 
      {} // search options 
      ); 

Answer 2

modal: true ha è di problema.

quando si alza un'altra finestra di dialogo jquery dalla forma di modifica jqgrid con modale: true. non puoi inserire nulla nella nuova finestra di dialogo, perché tutta la tastiera (solo entra è ok) l'evento viene fermato dal modale: true.

Quindi il problema è ancora lì.

Answer 3

prova a seguire all'interno aggiungere/modificare le opzioni

modal: true, 
jqModal:true