jQuery Grid Plugin - jqGridForum

Topic RSS

Using jqueryUI dialog with jQgrid.

28/10/2009
05:24

ffromdn

Member

Members

Forum Posts: 18

Member Since:
02/10/2009

Offline

I try to make "div tag" modal with jqueryUI ".dialog " function. It's work fine but MessageBoxes (for example when i want to delete row) - appears below modal window, i can see their but cannot click. I feel that z-index involved.....

What can i do?

Thanks for attention.

28/10/2009
06:25

jayarjo

Member

Members

Forum Posts: 17

Member Since:
20/10/2009

Offline

I'm not exactly a specialist of jgGrid, but I see two possible solutions to this. First is very simple - just set z-index of MessageBoxes to very high value (999 for example) through css (add a special rule to your stylesheet). Or if you got multiple dialogs, now and then covering each other, you will need to set z-index of MessageBoxes dynamically to number higher then parent dialog has at the moment (some custom jQuery selecting and manipulation - shouldn't be hard).

It could be though, that there is much simpler solution. Feel free to ignore my advice I was just trying to be helpful 🙂

28/10/2009
10:47

ffromdn

Member

Members

Forum Posts: 18

Member Since:
02/10/2009

Offline

may be it's wrong? If I am not mistaken - jQgrid using jqueryUI ....may be developers miss this element?

30/10/2009
03:19

ffromdn

Member

Members

Forum Posts: 18

Member Since:
02/10/2009

Offline

May be elegant decision exists?

30/10/2009
08:34

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Be a sure that all needed css are loaded. Also if you use dev version you should load some additional files. See docs.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

30/10/2009
09:17

ffromdn

Member

Members

Forum Posts: 18

Member Since:
02/10/2009

Offline

hmm there is 2 css files - jqeryui's and jQgrid's, both loaded and working.

<?php $this->headLink()->appendStylesheet($this->baseUrl . 'css/ui.jqgrid.css'); ?>
<?php $this->headLink()->appendStylesheet($this->baseUrl .'css/ui-lightness/jquery-ui-1.7.2.custom.css'); ?>

<?php $this->headScript()->appendFile($this->baseUrl .'js/jquery-1.3.2.min.js') ?>
<?php $this->headScript()->appendFile($this->baseUrl .'js/jquery-ui-1.7.2.custom.min.js') ?>
<?php $this->headScript()->appendFile($this->baseUrl .'js/i18n/grid.locale-ru.js') ?>
<?php $this->headScript()->appendFile($this->baseUrl .'js/jquery.jqGrid.min.js') ?>

02/11/2009
08:17

ffromdn

Member

Members

Forum Posts: 18

Member Since:
02/10/2009

Offline

All work fine, but i didn't found excision...((

02/11/2009
13:26

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Sorry I do not understand.

1. jqGrid does not use jQuery UI. jqGrid use a theming from jQuery UI which is quite diffrent.

2. jqGrid is not jQuery UI widget - it is separate plugin which can work without jQuery UI.

Please explain what you mean.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

04/11/2009
07:56

ffromdn

Member

Members

Forum Posts: 18

Member Since:
02/10/2009

Offline

1.Sorry i thought wrong about it.

2.ok ok.

The problem is solved.

After debugging my code with firebug - i have seen, that the jqueryui.dialog's z-index - 1000 and messagebox of jQgrid - 950(for example).

I have created dialog with "z-index:900" and problem has disappeared.

Thanks for patience Laugh

25/02/2010
11:09

yial2

Member

Members

Forum Posts: 14

Member Since:
24/02/2010

Offline

Hi ffromdn,

I am facing the same problem. May you tell me where do you set jqueryui.dialog's z-index to 900?

Many thanks!

25/02/2010
22:36

mhoque

Member

Members

Forum Posts: 5

Member Since:
13/11/2009

Offline

I am having the same issue. Will you please let me know where you have made that change?

26/02/2010
11:01

yial2

Member

Members

Forum Posts: 14

Member Since:
24/02/2010

Offline

Hi Mhoque,

I found the solution.

In your dialog, set zIndex: 800, e.g. below

        $("#divModal").dialog({
            autoOpen: false,
            modal: true, //this may cause the problem I describe below...
            zIndex: 800,
            title: "testing modal"
        });

but...here is a big BUT....(only with dialog option, modal: true)

If you try to add(or edit) a column, you will see the "add" modal pop up on top of the first popup JqGrid. Everything looks good so far until when I try to click on one of the textbox inside the "add" modal, I am NOT able to click or input anything in the textbox. I guess the z-Index still have some problem with multiple modal popup on the screen Frown . Anyway, if you are just viewing the grid, you will be just fine. Anyone has any tips for my new problem?

11/05/2010
03:32

michaelg

Member

Members

Forum Posts: 51

Member Since:
10/04/2010

Offline

Hi yial2,

Have you been able to find a solution to the problem? I too am having trouble with textboxes being uneditable when the jqgrid is inside a modal dialog

Cheers,

Michael

18/11/2010
19:19

wfreitas

New Member

Members

Forum Posts: 2

Member Since:
06/07/2010

Offline

I am facing the same problem. Looks like lots of people have are fighting with this issue. I think a good solution would be jqGrid to provide a new option for the zIndex value used by the modal dialogs.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
87 Guest(s)

Currently Browsing this Page:
1 Guest(s)