How to avoid form closing when click outside modal window when editing or adding a new row in JQgrid?

Question

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?

Galloon

Answer 1

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
            );

Galloon

Answer 2

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.

Carleencarlen

I am also facing the same problem. – Oakleil

Answer 3

try following inside add/edit options

 modal: true,
 jqModal:true

Straight