RadDatePicker shows behind RadToolTip

3 posts, 1 answers
  1. Jerome
    Jerome avatar
    7 posts
    Member since:
    Jun 2008

    Posted 17 Sep 2008 Link to this post

    Hi,

    In the code below, I am trying to put a RadDatePicker in a RadToolTip. However, the calendar shows behind the tooltip and I am not able to select the date from the calendar. I've heard that the z-index is the cause of this problem and I've followed the solution in the thread
    RadDatePicker doesnt work with tooltip but it still doesn't work. I would like to ask is there any alternative solution? Thank you very much.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
    <%@ Register Assembly="Telerik.Web.UI, Version=2008.2.723.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 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 id="Head1" runat="server">    
        <title>Untitled Page</title>    
    </head>    
    <body >      
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        <script type="text/javascript">  
            function ShowTooltip()  
            {  
                $find("<%= RadToolTip1.ClientID %>").show();   
            }  
        </script> 
        </telerik:RadCodeBlock> 
     
        <form id="form1" runat="server">    
            <asp:ScriptManager runat="server" ID="ScriptManager">    
            </asp:ScriptManager>    
            <button onclick="ShowTooltip()" >Test</button> 
              
            <telerik:RadToolTip ID="RadToolTip1" runat="server"   
                                Modal="True" IsClientID="True" Sticky="True"   
                                ManualClose="True" Animation="None" Position="Center"   
                                RelativeTo="BrowserWindow"  > 
     
            <telerik:RadDatePicker Runat="server">  
            </telerik:RadDatePicker> 
        </telerik:RadToolTip> 
        </form>    
     
    </body>    
    </html> 
     

    Regards,
    Jerome

  2.
  3. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Sep 2008 Link to this post

    Hello Jerome,

    Please try to increase the RadDatePicker z-index by using the following code on page load:

    <script type="text/javascript">
    function pageLoad()
    {
        Telerik.Web.UI.Calendar.Popup.zIndex = 10000000;
    }
    </script>

    Test this approach and let us now if this helps.

    Best wishes,
    Maria Ilieva
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Jerome
    Jerome avatar
    7 posts
    Member since:
    Jun 2008

    Posted 17 Sep 2008 Link to this post

    Hi Maria,

    This is working perfectly, thank you very much.

    Regards,
    Jerome
Back to Top