is there a way to avoid form closing when adding or editing a row. Jqgrid is working perfectly in our application, but there is a little problem, when the user is editing or creating a row via form editing and the user clicks outside the form's modal, the modal closes and the changes are lost. Is it posible to avoid this behavior?
Solved!
Just, be sure to set the modal:true in your grid edit or add options, but be sure you have downloaded jqGrid whith modal editing. See http://www.trirand.com/blog/?page_id=6.
Here is my grid (look for //options),now the modal only closes when click in save or cancel buttons:
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
);
modal:true has it's problem.
when you raise another jquery dialog from the jqgrid editform with modal:true. you can't input anything in the new dialog, because all key board (just enter is ok) event is stopped by the modal:true.
So the problem is still there.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With