Z-order problem with grid filter

[Tim]

Hi

I have a somewhat complicated problem with z-ordering some of my UI elements.

The Site Master part of my page contains a RadMenu control, this has a z-index of 7000.

Elsewhere in my my page I have a docling area with several panels.

Originally when I undocked one of the panels I saw some controls bleeding through, because of
their higher z-index. My Site Master RadMenu was one of the problem controls, but so were
the Date and Time picker icons in a gris filter I have in part of my page.

So I decided to detect the undocking of my panel and bump its z-index to 7001.

This solved my problem.

Until!!!!!

I was then asked to put a grid in the dock area with filtering on a GridBoundColumn.

This shows a filter control that extends a dropdown when clicked.

Well this dropdown has a z-index less than 7001 so it appears behind my undocked area.

I thought this would be as simple as writting some jQuery in the doc ready function to tweak
the z-index of the dropdown, but either my selector is wrong or something else is preventing
me from affecting the z-index of the div you generate.

Help greatly appreaciated.

[Galin]

Hello Tim,

You do not need jQuery or other selector to increase the z-index of the RadControl, it is easy to change  the value of the z-index property of every control by using the common style property. e.g.:

<telerik:RadComboBox ID="RadComboBox1" runat="server" style="z-index: 7500"></telerik:RadComboBox>

Additionally please refer to this help topic.

Also I highly recommend to use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have. After researching the styles of elements you can add or edit their z-index value.

If the issue still persists, could you please send us a simplified running page where we will be able to observe the issue. This will help us provide better support.


Regards,
Galin
the Telerik team

[Tim]

Hi

I cann't get you a running application right now.

However you are misunderstanding the problem.

I am not using a ComboBox. The icon that presents in the filter area is just the filter icon

When I click on the icon it presents a menu that contains the list of allowable filter operations.

Contains
Equal
Not Equal

I can see the control in the html

It has a class of RadMenu RadMenu_Context and some very compilcated ID that your code presumably
generated.

So it is not a control in my aspx code that I can assign a z-order to.

I figured I could write the following in my document ready function:

$(

 

".RadMenu.RadMenu_Context").css("z-index", "9001");

but whe I look at the rendered html after the dock area has been undocked the element has
an inline style that has a z-index of 7000, the default index you supply for RadMenu objects.

Perhaps I am doing it at the wrong page of the page life-cycle.

Again any help greatly appreciated

 

[Galin]

Hi Tim,

I am sorry for my misunderstanding in my previous post.

The provided jQuery code does not work, because the selector does not hit the correct element - you have to change the z-index of its parent. Please try to use this selector: $(".RadMenu")

Also in this case you can achieve same functionality by setting the style on filterMenu, e.g.:

<telerik:RadGrid ID="RadGrid1"runat="server">
    <FilterMenu style="z-index: 10000;"></FilterMenu>
</telerik:RadGrid>

I hope this helps.

Greetings,
Galin
the Telerik team

[Tim]

No problem

The MenuFilter tag was just what I was looking for. I'd rather not do it in JQuery unless I absolutely have to.

Once again, thanks for your help.