3

How do I set the z-index for info_dialog, when using UI dialog ?

David O.
  • 97
  • 1
  • 10

1 Answers1

2

$.jgrid.info_dialog uses internally $.jgrid.createModal which uses $.jgrid.jqModal (see the line) which introduced since not so long time (see my suggestion here). So you can do something like

$.jgrid.jqModal = $.extend($.jgrid.jqModal || {}, {
    zIndex: 1234
});

because of another parameter of navGrid you have to add additionally

$.extend($.jgrid.nav, {
    alertzIndex: 1234
});

to make $.jgrid.jqModal.zIndex setting working.

UPDATED: In any way you can use "subclassing" of $.jgrid.info_dialog (like in the answer for example). The corresponding code could be like the following:

var oldInfoDialog = $.jgrid.info_dialog;
$.extend($.jgrid,{
    info_dialog: function (caption, content, c_b, modalopt) {
        if (modalopt && (modalopt.zIndex === null || modalopt.zIndex === undefined ||
            (typeof modalopt.zIndex === "number" && modalopt.zIndex < 1234))) {

            modalopt.zIndex = 1234;
        }
        return oldInfoDialog.call (this, caption, content, c_b, modalopt);
    }
});
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @DavidO.: You should describe your problem more exactly. You didn't specified the *editing mode* which you use. If you use form editing you should have no problems with the validation of data. I agree, that jqGrid has problems with forwarding of the `zIndex`. There are many options how the problem could be fixed. One can modify one line of jqGrid code ([here](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.common.js#L204) or [here](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.common.js#L194)) or overwrite `info_dialog` method and call the original one with `zIndex` set. – Oleg Sep 02 '12 at 10:40
  • I have: {name:'procent',index:'procent', width:70,align:'center',editable:true,editrules:{required:true}},and When field " procent " is empty, info_dialog appear, but z-index is 1000, and behind UI Dialog – David O. Sep 02 '12 at 21:46
  • @DavidO.: I suppose indirectly that you use [inline editing](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing) or [cell editing](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing) and not [form editing](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing). If would be better to append your question with the code example (just click on "edit" link under the text of the question). By the way, the value 1000 come from [the line](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.common.js#L194) which I referenced. – Oleg Sep 02 '12 at 21:57
  • 1
    @DavidO.: In any way you can solve the problem by the usage of "subclassing": see **UPDATED** part of my answer. – Oleg Sep 02 '12 at 22:08
  • Thank you. It's ok. But an error occurs when you press the close.TypeError: i.hideModal is not a function – David O. Sep 03 '12 at 19:33
  • @DavidO.: I can't see any errors. I inserted the code in one old demo and all seems to work. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/editwithdependendselects3.htm). – Oleg Sep 03 '12 at 19:44
  • In your demo , inline editing on double-click, leave the name field blank, and save. appears info_dialog with error, then press the close button – David O. Sep 03 '12 at 19:52
  • @DavidO.: Ohh, yes. To fix the problem one should use `.call` with `this`: `oldInfoDialog.call (this, caption, content, c_b, modalopt);` instead of `oldInfoDialog (caption, content, c_b, modalopt);`. I fixed the text of the answer and the demo. – Oleg Sep 03 '12 at 20:01