RadToolBarSplitButton drop down gets hidden by RadWindowManager

[Yohancef]

Hi,

I have a Toolbar located above a window manager. When the window manager is empty the Splitbutton menu is visible, but when the window manager loads a window the button menu goes behind the active window. I tried playing with the z-index but by default the toolbar has a higher index than the window.

I am using Telerik.Web.UI version 2011.1.519.35.

<%

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="Company.SecurePages.Main" Async="true" AsyncTimeout="30" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<link href="../Css/General.css" rel="stylesheet" type="text/css" />

 

</head>

 

<

 

body scroll="no" >

 

<

 

form id="form1" runat="server">

 

 

<

 

telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

</

 

telerik:RadScriptManager>

 

 

 

telerik:RadToolTip Title="Versions" runat="server" ID="HelpToolTip" ManualClose="true" Width="250px" ShowEvent="onclick"

 

TargetControlID

 

="HelpBtn" IsClientID="true" Position="BottomLeft"

 

>

</

 

telerik:RadToolTip>

 

<

 

telerik:RadToolTip Title="Session Timed Out" runat="server" ID="TimeoutToolTip" Width="250px"

 

ShowEvent

 

="onclick" TargetControlID="TimeoutLkBtn" IsClientID="true" HideEvent="FromCode"

 

Position

 

="TopCenter" Modal="true" OnClientBeforeHide="OnClientBeforeHide"

 

RelativeTo

 

="BrowserWindow" CssClass="rtCloseButton" >

 

 

<table width="100%">

 

 

<tr>

 

 

<td>

 

Your session is about to time out.

 

<br />

 

Do you want to continue this session?

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td align="center">

 

 

<asp:Button ID="YesBtn" Text="Yes" runat="server" Width="35px" OnClientClick="HideTimeoutMsg('Y'); return false;"/>

 

 

&nbsp;

 

 

<asp:Button ID="NoBtn" Text="No" runat="server" Width="35px" OnClientClick="HideTimeoutMsg('N'); return false;" />

 

 

</td>

 

 

</tr>

 

 

</table>

 

</

 

telerik:RadToolTip>

 

<

 

telerik:RadSplitter id="Radsplitter3" runat="server" height="99.5%" width="100%" Orientation="Horizontal">

 

 

<telerik:RadPane id="Radpane3" runat="server" Height="20px" Scrolling="None" CssClass="menuPanes" >

 

 

<div class="topBackground" style="height:20px; " >

 

 

<table width="100%" cellpadding="0" cellspacing="0" >

 

 

<tr>

 

 

<td style="width:10%">

 

 

<asp:LinkButton ID="TimeoutLkBtn" runat="server" CssClass="hiddenBtn"></asp:LinkButton>

 

 

<asp:LinkButton ID="PostBtn" runat="server" CssClass="hiddenBtn"></asp:LinkButton>

 

 

</td>

 

 

<td align="right" style="width:85%; ">

 

 

<telerik:RadMenu ID="UserRadMenu" runat="server" EnableEmbeddedSkins="false" style="float:right">

 

 

<Items>

 

 

<telerik:RadMenuItem runat="server" Text="" >

 

 

<Items>

 

 

<telerik:RadMenuItem runat="server" Text="Change Password" NavigateUrl="UserPassword.aspx" >

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem Text="Edit Authentication" NavigateUrl="EditMfa.aspx" >

 

 

</telerik:RadMenuItem>

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

</Items>

 

 

</telerik:RadMenu>

 

 

</td>

 

 

<td style="width:5%">

 

 

<table width="100px" cellpadding="0" cellspacing="0" >

 

 

<tr>

 

 

<td style="width:10px; text-align:right;border-bottom-style:none; border-spacing:0px; border-right-width:0px; padding-left:0px; padding-right:0px; ">

 

 

<asp:Label ID="lbSeparator1" runat="server" ForeColor="Black" Text="|"></asp:Label>

 

 

</td>

 

 

<td align="center">

 

 

<asp:ImageButton ID="HelpBtn" runat="server" ImageUrl="~/Images/help_16X16.png"></asp:ImageButton>

 

 

</td>

 

 

<td style="width:10px; text-align:left; border-left-width:0px; border-right-width:0px; padding-left:0px; padding-right:0px; ">

 

 

<asp:Label ID="lbSeparator2" runat="server" ForeColor="Black" Text="|"></asp:Label>

 

 

</td>

 

 

<td style="width:50px">

 

 

<asp:LinkButton ID="LogoutLkBtn" OnClick="LogoutLkBtn_Click" runat="server" ForeColor="Black">Logout</asp:LinkButton>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</div>

 

 

</telerik:RadPane>

 

 

<telerik:RadPane id="Radpane4" runat="server" Height="85px" Scrolling="None" CssClass="ms-globalTitleArea">

 

 

<table width="100%" height="100%" cellpadding="0" cellspacing="0" style="border-bottom-width:0px; padding-bottom:0px;">

 

 

<tr valign="top" align="left">

 

 

<td colspan="2">

 

 

<img runat="server" id="BankImage" />

 

 

</td>

 

 

</tr>

 

 

<tr valign="bottom" align="left">

 

 

<td>

 

 

<telerik:RadToolBar Width="60px" ID="rtbAppMenu" runat="server" EnableEmbeddedSkins="true" OnClientButtonClicked="ClientItemClicked" OnButtonClick="rtbAppMenu_ButtonClick" >

 

 

<Items>

 

 

<telerik:RadToolBarSplitButton ImageUrl="../Images/view_detail.gif" ToolTip="Open Applications" EnableDefaultButton="false" Height="20px" HoveredCssClass="Hovered" >

 

 

<Buttons>

 

 

<telerik:RadToolBarButton runat="server" Text="App1" Value="App1" Visible="True" ></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="App2" Value="App2" Visible="True"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="App3" Value="App3" Visible="True"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="App4" Value="App4" Visible="True"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="IWA_App1" Value="IWA_App1" Visible="False"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="IWA_App2" Value="IWA_App2" Visible="False"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="IWA_App3" Value="IWA_App3" Visible="False"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="IWA_App4" Value="IWA_App4" Visible="False"></telerik:RadToolBarButton>

 

 

</Buttons>

 

 

</telerik:RadToolBarSplitButton>

 

 

</Items>

 

 

</telerik:RadToolBar>

 

 

</td>

 

 

<td style="width:100%; ">

 

 

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" OnClientTabSelected="OnClientTabSelected" Width="100%" Skin="Vista" SelectedIndex="0" ScrollChildren="true" EnableEmbeddedSkins="true" Height="25px" >

 

 

<TabTemplate>

 

 

<asp:Label ID="TabTextLbl" runat="server" ></asp:Label>

 

 

<asp:ImageButton ID="CloseBtn" OnClientClick="CloseSelectedApplication(this)" ImageUrl="~/Images/Delete.gif" runat="server" ImageAlign="Middle" />

 

 

</TabTemplate>

 

 

</telerik:RadTabStrip>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar id="Radsplitbar4" runat="server" CollapseMode="Forward"/>

 

 

<telerik:RadPane id="Radpane5" OnClientResized="PaneResized" Scrolling="None" Width="100%" Height="100%" runat="server">

 

 

</telerik:RadPane>

 

</

 

telerik:RadSplitter>

 

 

 

<telerik:RadWindowManager ShowContentDuringLoad="false" VisibleStatusbar="false" VisibleTitlebar="false" Behaviors="Maximize" ID="RadWindowManager" runat="server" RestrictionZoneID="Radpane5" DestroyOnClose="true" Skin="" EnableEmbeddedSkins="false" >

 

 

</telerik:RadWindowManager>

  

</

form>

 

</body>

 

</html>

 

[Kate]

Hi Yohancef,

I tested the code that you provided but I am not able to reproduce the issue (please see attached image). I also noticed in your code that you put the RadToolBar control inside a RadSplitter and then in a RadPane control. In order for the z-index to take effect, the two controls whose precedence you need to change need to be on the same level. For instance, two of the controls that have the same level (that are siblings) in your code are RadWindowManager and RadSplitter. Therefore I would suggest that you try to change the z-indexes of the above mentioned controls if you need the RadWindowManager to go behind the RadToolBar. Please take a look at this help article as well. In case this does not help I would suggest that you open a support ticket and send us a simple runnable project that demonstrates the issue so we can help you in the particular scenario.  

Kind regards,
Kate
the Telerik team

[Yohancef]

Here is a simpler version:

<%

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTester._Default" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<title></title>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<telerik:RadScriptManager ID="rsmMain" runat="server">

 

 

</telerik:RadScriptManager>

 

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

<script language="javascript" type="text/javascript">

 

 

function OpenRadWindows() {

 

 

 

var manager = $find("<%=RadWindowManager.ClientID %>");

 

 

var windows = manager.get_windows();

 

 

var win = windows[0];

 

win.show();

win.maximize();

win =

null;

 

}

 

 

</script>

 

 

</telerik:RadCodeBlock>

 

 

<telerik:RadSplitter ID="rspMain" runat="server" Width="100%" Orientation="Horizontal" Height="100%" BorderSize="0" PanesBorderSize="0" style="z-index:1099">

 

 

<telerik:RadPane id="Radpane4" runat="server" Height="85px" Scrolling="None">

 

 

<table width="100%" height="100%" cellpadding="0" cellspacing="0" style="border-bottom-width:0px; padding-bottom:0px;">

 

 

<tr valign="top" align="left">

 

 

<td colspan="2">

 

 

</td>

 

 

</tr>

 

 

<tr valign="bottom" align="left">

 

 

<td>

 

 

<telerik:RadToolBar Width="60px" ID="rtbAppMenu" runat="server" EnableEmbeddedSkins="true" OnClientButtonClicked="OpenRadWindows">

 

 

<Items>

 

 

<telerik:RadToolBarSplitButton ImageUrl="Resources/view_detail.gif" ToolTip="Open Applications" EnableDefaultButton="false" Height="20px" HoveredCssClass="Hovered" >

 

 

<Buttons>

 

 

<telerik:RadToolBarButton runat="server" Text="Google" Value="IWA_App1" Visible="True"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Google" Value="IWA_App2" Visible="True"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Google" Value="IWA_App3" Visible="True"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Google" Value="IWA_App4" Visible="True"></telerik:RadToolBarButton>

 

 

</Buttons>

 

 

</telerik:RadToolBarSplitButton>

 

 

</Items>

 

 

</telerik:RadToolBar>

 

 

</td>

 

 

<td style="width:100%; ">

 

 

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Width="100%" Skin="Vista" SelectedIndex="0" ScrollChildren="true" EnableEmbeddedSkins="true" Height="25px" >

 

 

<TabTemplate>

 

 

<asp:Label ID="TabTextLbl" runat="server" ></asp:Label>

 

 

<asp:ImageButton ID="CloseBtn" runat="server" ImageAlign="Middle" />

 

 

</TabTemplate>

 

 

</telerik:RadTabStrip>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar id="Radsplitbar4" runat="server" CollapseMode="Forward" Width="100%"/>

 

 

<telerik:RadPane id="Radpane5" Scrolling="None" Width="100%" Height="100%" runat="server">

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

<telerik:RadWindowManager ShowContentDuringLoad="false" VisibleStatusbar="false" VisibleTitlebar="false" Behaviors="Maximize" ID="RadWindowManager" runat="server" DestroyOnClose="true" Skin="Windows7" Width="100%" RestrictionZoneID="Radpane5" style="z-index:10" >

 

 

<Windows>

 

 

<telerik:RadWindow runat="server" ID="wndGoogle" NavigateUrl="http://www.google.com" Width="100%" Height="100%" style="z-index:100"></telerik:RadWindow>

 

 

</Windows>

 

 

</telerik:RadWindowManager>

 

 

</form>

 

</

 

body>

 

</

 

html>


See attachment for a screenshot of the behavior.

 

[Kate]

Hi Yohancef,

Thank you for the code provided. Please take a look at the attached simple page where I have made some modifications so that the RadToolBar stays on top of the RadWindow when the content is loaded.

All the best,
Kate
the Telerik team

[Yohancef]

<

 

telerik:RadWindowManager ShowOnTopWhenMaximized

 

="false" />

 

Works great now thanks!