RadComboBox zIndex Issue in RadWindow

[Tim]

Hi Telerik.  I am trying to change the zIndex on a RadComboBox drop down list inside a RadWindow.  I have had to override some of the zIndex values on the elements due to the application interface requirements, and I have run into a few minor issues.  I am currently able to fix the Calendar elements with the following technique:

Sys.Application.add_load(changeZIndex);

 

 

function changeZIndex() {

 

Type.registerNamespace(

 

"Telerik.Web.UI.Calendar");

 

window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000;

}

Is there a way to do this same technique with the RadComboBox to get the list to show up in front of the RadWindow?

Type.registerNamespace(

 

"Telerik.Web.UI.RadComboBox");

 

window.Telerik.Web.UI.RadComboBox.???.zIndex = 14000;

Thanks in advance for your assistance.

Tim

[Fiko]

Hello Tim,

You can change the z-index value of the controls by adding a style="z-index: <value>" property in its markup. More details about the z-indexes can be found in this help page.

All the best,
Fiko
the Telerik team

[Tim]

Fiko,

I appreciate your response, however this does not answer my question.  The issue that I am having occurs because I am opening a RadWindow with a user control that contains the RadComboBox.  This is a similar issue found with your Calendar control for which the solution is discussed at your forum located at http://www.telerik.com/community/forums/aspnet-ajax/calendar/datepicker-showing-up-underneath-pop-up-window.aspx.

I have tried changing the z-index value in styles, but it continues to show up under the RadWindow no matter how high I set the value.

If you could let me know what to replace the question marks with in the following lines of code, I am pretty sure it will solve my issue.

Type.registerNamespace("Telerik.Web.UI.RadComboBox");

window.Telerik.Web.UI.RadComboBox.???.zIndex = 14000;

Thank you again.

Tim

[Fiko]

Hello Tim,

Could you please apply one of these solutions:

1. Change the z-index of the RadWindow control:
   

   <telerik:RadWindow ID="RadWindow1" runat="server" style="z-index:6001">
   </telerik:RadWindow>

2. Or change the z-index of the RadComboBox control:
   

   <telerik:RadComboBox ID="RadComboBox1" runat="server" style="z-index:2999">
       <Items>
           <telerik:RadComboBoxItem Text="Item1" Value="Item1" />
           <telerik:RadComboBoxItem Text="Item2" Value="Item2" />
           <telerik:RadComboBoxItem Text="Item3" Value="Item3" />
       </Items>
   </telerik:RadComboBox>

In case that this does not help, could you please open a new support ticket and send me a sample that shows the issue? I will check it and do my best to provide a working solution as soon as possible.

Kind regards,
Fiko
the Telerik team

[Julian]

zIndex="10000" worked for me thx

[Bil]

doesn't have a "z-index" - the  inside it does - is there an easy way to set it's z-index > 8000 ( z-index)...

[hart]

I had to role my own Skin Chooser and trap off the event handler of the comboBox to set skins

if (!Page.IsPostBack)
{
  var skinComboBox = FindControlRecursive(this, "skinCombo");
  if (skinComboBox != null)
  {
    Telerik.Web.UI.RadComboBox myCombo = (Telerik.Web.UI.RadComboBox)skinComboBox;
    List<string> list = Telerik.Web.SkinRegistrar.GetEmbeddedSkinNames(typeof(Telerik.Web.UI.RadGrid));
    foreach (string aSkin in list)
      myCombo.Items.Add(aSkin);
  }
}

 

[hart]

forgot the html part and java

<script type="text/javascript">
       var shouldClose = false;

       function dropDownOpening(sender, args) {
         shouldClose = true;
       }

       function itemClosing(sender, args) {
         args.set_cancel(shouldClose);
       }

       function dropDownClosed(sender, args) {
         shouldClose = false;
       }
     </script>

<telerik:RadComboBox ID="skinCombo" runat="server" OnClientDropDownOpening="dropDownOpening"
  OnClientDropDownClosed="dropDownClosed" OnClientSelectedIndexChanged="dropDownClosed"  style="z-index:10000" />