RadToolBarSplitButton drop down gets hidden by RadWindowManager

5 posts, 1 answers
  1. Yohancef
    Yohancef avatar
    7 posts
    Member since:
    Jun 2011

    Posted 30 Jun 2011 Link to this post

    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>

     

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yohancef
    Yohancef avatar
    7 posts
    Member since:
    Jun 2011

    Posted 06 Jul 2011 Link to this post

    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.

     

  5. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. Yohancef
    Yohancef avatar
    7 posts
    Member since:
    Jun 2011

    Posted 08 Jul 2011 Link to this post

    <

     

    telerik:RadWindowManager ShowOnTopWhenMaximized

     

    ="false" />

     



    Works great now thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017