Hi, 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?
views:
197answers:
2
A:
Juan, did you ever find a resolution to this?
I have an app which breaks because there is no event triggered when closing the modal in this way.
Ethan
2010-05-19 02:14:14
I solved the problem, but I'm not sure if it will help you
Juan Carlos
2010-05-19 15:13:44
A:
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
);
Juan Carlos
2010-05-19 15:14:02