DropDownList and modal Window

[John]

Hi,

I downloaded the new release today (upgrade from beta 2)...a new bug appears to have been introduced.

I've created a modal Window and one of the controls in that window happens to be a DropDownList.  When I click to open the list, the Popup displays behind the window (see attached screen shot).  This occurs in all major browsers (ie/ff/chrome/safari)

After a bit of inspecting, it looks like the z-index of the Popup (from the DropDownList) is less than the z-index of the Window, this explains it's positioning.  I can see that the popup code tries to set it's index to be greater than any of it's parents in the DOM, but since the modal Window is not one of the direct parents of the Popup, then it doesn't work.

I've tried explicitly setting the z-index but that appears to get overridden by internal code in the Popup.

Any ideas/suggestions/fixes would be greatly appreciated.

John

[Cuinn]

Hi,

Just wanted to say that I've also run into this bug.  Was all excited to transition to the release code and then ... broken.  Hoping that we can get a fix for this one soon.

Oh, this also applies to the popup for datepickers and probably other popups as well.

Cuinn.

[Dmitry]

Hello,
Try find the popup div object and set it's z-index by adding .css("z-index", 9999999) to it. Might work.

[John]

Thanks for the suggestion Dmitry. 

Unfortunately, explicitly setting the z-index of the Popup div doesn't work either.  The Popup code appears to override this internally every time that it's opened. 

I also tried binding to the open event of the Popup control and setting the index there, but to no avail.

John

[Bobby]

I am having this same problem with Kendo drop downs used inside of a window.  Any update?

[Cuinn]

Ok.

I've managed to get this working.

There is a problem with the calculation of the z-index.  This occurs in the popup code.  Looking at the code I can see two problems.  One is that the loop that looks at the parents of the popup doesn't actually set anything (local var never does anything with higher level var) and also the loop is set to return false the first time (???).

I have modified this so that the internal var updates the higher level zIndex var and also commented out the return false line.  It now works fine for me every time.  I can provide a fix for the minified version.  You will need to search for the following code and then replace it.

Search for:

if(!isNaN(b)){b=Number(b)+1;return!1}})

 Replace with:

if(!isNaN(b)){if(b>=o){o=Number(b)+1}}})

Mods, please let me know if it is not acceptable to post code in this form.  I have only posted the minified version (as all should have access to this via the GPL download).  Keep in mind that this is not official and I am not a member of the KendoUI team.  This comes with a big "use at own risk" warning.  As soon as the next release of kendo comes out this should not be a problem anymore.

Regards,
Cuinn.

[Cuinn]

Small error in the code to search for has been fixed.  Sorry about that.

Regards,
Cuinn.

[Bobby]

Thanks Cuinn, that fix works for me too!

[PPCnSEO]

Can also confirm that this fix works.

Can an admin please update this thread when the fix makes it into the weekly or minor builds.

[Petyo]

Hello,

Sorry for the delayed response. We have traced down the problem, and fixed it. Unfortunately, we did not discover any workaround apart from patching the code itself.

If you need this issue fixed, open a support ticket - I will provide an internal build.   

All the best,
Petyo
the Telerik team

[Dmitry]

May we have it without posting a support ticket please?
Thank you.

[Georgi Krustev]

Hello Dmitry,

Our policy states that we provide internal builds only to paying customers. The internal build, which provides the fix will be available early next week. You can download it from the "Download and Menage products" page. If you are in a hurry, you can use the fix mentioned earlier in this thread.

Regards,
Georgi Krustev
the Telerik team

[zenit1]

Cuinn, thanks a lot. It works great

[John]

Thanks Cuinn, your fix did the trick.

[Cuinn]

Hi,

There's a fix for this that's now available (although it doesn't seem to be available via the account download yet).  Dimo linked it in the Window control forum http://www.kendoui.com/forums/ui/window/window-z-index-behaviour-issues.aspx

Looks like it should do the trick.

Regards,
Cuinn.

[Drew]

After you open the window, use something like this

            $("#ID_OF_WRAPPING_ELEMENT").find(".k-dropdown").each(
                function (e) {
                    this.style.display = "";
                });

[David]

I'm experiencing the very same problem. All values passed to the dropdownlist are ok, Values are available in the dropdown box by using the up/down arrow keys. But dropdown list is not expanding - has a fix been deployed? I have the Q2 2012 install.

[Georgi Krustev]

Hello David,

 
Here is a quote of the anwer I posted to the support ticket opened on the same subject:

The described problem is not a known issue. I prepared a simple test project to reproduce the problem, but everything works on my end as expected. Could you check it and let me know if the problem is reproducible on your end? It will be very helpful to modify the test project in order to replicate the problem. Thus it will be easier for us to continue with the investigation.

I will suggest you continue our discussion in the support thread to avoid any duplications.

All the best,
Georgi Krustev
the Telerik team

[Elena]

Georgi,
this bug was not fixed completely.
See here: http://www.kendoui.com/forums/ui/dropdownlist/dropdownlist-in-window-issue.aspx
There is an example in jsFiddle.