0

i have a jquery ui dialog and i have a jqgrid on that dialog. When i click Add or Edit, the jqgrid popup (to have a popup on a popup), it shows up to enter in the data BUT . .

. .it shows up behind the jquery UI dialog (the zorder is wrong). Is there anyway to have the jqgrid popup set the correct Zorder so this window shows on top of (in front of) the jquery ui dialog so this is usable.

I have a screenshot below highlighting the behavior. enter image description here

here is my code:

  $(document).ready(function () {

    $("#modalDialogContainer").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    width: 1000,
    modal: false,
    buttons: {
        'Close': function () {
            closeModalPopup();
        }
    }
});
});

then later on a button click to launch the jquery ui dialog i have this:

$("#modalDialogContainer").dialog("open");

i found this link which seems to be someone experiencing the same issue and at the end it says its fixed but i don't see this inthe jqgrid source code.

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • Any way to link to an example? – Jared Farrish Mar 20 '11 at 19:32
  • @Jared Farrish - unfortunately this is on a intranet site but it seems to be reproducible with any jqgrid on a jquery-ui-dialog. – leora Mar 20 '11 at 19:35
  • @ooo - If you could recreate your problem on jsfiddle.net, that would be useful. – Jared Farrish Mar 20 '11 at 19:37
  • @Jared Farrish - just tried but jsfiddle.net doesn't seem to support the ability to create dialogs so unfortunately not going to be able to recreate in this tool – leora Mar 20 '11 at 19:46
  • @ooo - Then please post some code. Also, revisit jfiddle - Why do you think it can't? I'd be interested to see that it couldn't. Make sure and pay attention to all of the settings available. – Jared Farrish Mar 20 '11 at 19:48
  • @ooo - If you know it's a z-order issue, why not use the dialog position option? http://docs.jquery.com/UI/Dialog#option-position – Jared Farrish Mar 20 '11 at 19:56
  • Also, z-index: http://docs.jquery.com/UI/Dialog#option-zIndex – Jared Farrish Mar 20 '11 at 19:58
  • @Jared Farrish - ah, didn't see the zindex property . . that seemsed to fix the problem (added zIndex: 55) . . can you put your comment as an answer (not a comment) and i will mark as correct.. thanks for your help – leora Mar 20 '11 at 20:03
  • @ooo - Glad it helped. I added an answer. I kept thinking that going through an alternate method to recreate the issue, you'd see the problem and fix it - that's how I almost always find my answers, through my own verbalization and recreation. That's why I ask so few questions, it's refactoring and rethinking that leads me to find my own problem solutions. – Jared Farrish Mar 20 '11 at 20:16
  • @ooo - Would you mind posting more info in your question about your solution (under an EDIT heading)? – Jared Farrish Mar 20 '11 at 20:53

2 Answers2

7

To solve your problem you can use zIndex option of "Add", "Edit" or "Del" which is not documented in the jqGrid documentation. Default value of zIndex is 950 For example you can use

$("#list").jqGrid('navGrid','#pager',{/*navGrid options*/},
                  {zIndex:1234}, // Edit options
                  {zIndex:1234}, // Add options
                  {zIndex:1234}, // Del options
                  {multipleSearch:true,overlay:false});

(default value of zIndex parameter of jQuery UI Dialog is 1000 so you should choose the higher value)

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • This is probably a rhetorical question, but why is it undocumented? – Jared Farrish Mar 20 '11 at 20:35
  • @Jared Farrish & @ooo: It is a question to to me. Tony Tomov, the developer of jqGrid, have not documented all changes of last releases. In general it is wiki documentation, so everybody can do this. Probably I will made the corresponding changes about `zIndex`, but it is not only place which should be modified. – Oleg Mar 20 '11 at 21:27
  • @Jared Farrish & @ooo: I included in the documentation of `viewGridRow`, `delGridRow`, `editGridRow` functions the text about the `zIndex` parameter. It would be good if somebody who is native English speaker read and correct my text. – Oleg Mar 20 '11 at 22:07
  • @Oleg why is it in the examples of jqgrid I am seeing only the grid options are passed to the jqgrid constructor. Also what is the difference between `list` and `navGrid`? Can you point me to where these are documented? – Bnrdo Feb 21 '14 at 09:20
  • @onepotato: The options of jqGrid constructor are described [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). On the there side there are options of many other methods. The options of `editGridRow` are described [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#properties) and [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events). 4-d and 5-th parameters of [navGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition) are options of `editGridRow` which will be used if the user clicks on Edit of Add buttons. – Oleg Feb 21 '14 at 09:57
1

Z-index fixes the problem (as your comment mentions):

http://docs.jquery.com/UI/Dialog#option-zIndex

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104