Jak uniknąć zamykania formularzy podczas klikania zewnętrznego okna modalnego podczas edycji lub dodawania nowego wiersza w JQgrid?

Question

jest sposobem na uniknięcie zamykania formularza podczas dodawania lub edycji wiersza. Jqgrid działa doskonale w naszej aplikacji, ale jest mały problem, gdy użytkownik edytuje lub tworzy wiersz poprzez edycję formularza, a użytkownik klika poza modalnym formularzem, modal zamyka się, a zmiany są tracone. Czy można uniknąć takiego zachowania?

Answer 1

Rozwiązany!

Po prostu ustaw modal: true w edycji siatki lub dodaj opcje, ale upewnij się, że pobrałeś edycję modów jqGrid whith. Zobacz http://www.trirand.com/blog/?page_id=6.

Oto moja siatka (poszukaj // opcji), teraz modalna zamyka tylko wtedy kliknij zapisać lub anulować przyciski:

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

modalne: prawdą jest to problem.

po podniesieniu innego okna dialogowego jquery z pliku jqgrid editform z modal: true. nie można wprowadzić niczego w nowym oknie dialogowym, ponieważ cała tablica kluczy (wystarczy wpisać jest ok) zdarzenie jest zatrzymywane przez modal: true.

Problem nadal występuje.

Answer 3

spróbować następujących wewnątrz dodawać/edytować opcje

modal: true, 
jqModal:true