RadDatePicker doesnt work with tooltip

9 posts, 0 answers
  1. possible
    possible avatar
    77 posts
    Member since:
    Oct 2006

    Posted 28 Apr 2007 Link to this post

    Hi..

    I have ascx file with RadDatePiker inside it, this ascx is used in tooltip (all is based on example from online demos). When tooltip is show date picker is rendered correct but when I click on it nothing happens.

    Regards
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 02 May 2007 Link to this post

    Hello tspossible,
    I was able to reproduce the problem you describe - the calendar of the RadDatePicker is displayed behind the RadToolTip. I have forwarded this issue to our developers and we will fix it as soon as possible.

    Regards,
    Tsvetie
    the telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ragingpixel
    ragingpixel avatar
    3 posts
    Member since:
    Nov 2006

    Posted 03 Jul 2007 Link to this post

    I am experiencing a similar problem using the RadDateTimePicker from within a RadToolTip.  One additional thing to note is that when using both date and time pickers, which ever control you click first will popup behind the ToolTip, and the second will load in front of it like normal.

    I am using the most recent Prometheus hotfix (build 2007.1.626.0)... any word on a solution?
  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 06 Jul 2007 Link to this post

    Hi ragingpixel,

    Here is a code snippet that demonstrates how you could work around this problem by modifying the z-index value of the tooltip wrapper:

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        /* the id of the wrapper element is formed like this: 
         
            RadTooltipWrapper_[your-RadToolTip-ID]  
         
        */ 
        #RadToolTipWrapper_Tooltip1 
        { 
            z-index: 49999 !important; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager runat="server" ID="ScriptManager"
            </asp:ScriptManager> 
            <div> 
     
                <script type="text/javascript"
                // in order to avoid a floating open calendar / time popup if the tooltip is closed prior to date / time selection 
                function OnBeforeHide() 
                { 
                    var picker1 = <%= RadDatePicker1.ClientID %>
                    var picker2 = <%= RadDateTimePicker1.ClientID %>
                     
                    if (picker1.IsPopupVisible()) 
                        picker1.TogglePopup(); 
                    else if (picker2.IsPopupVisible()) 
                        picker2.TogglePopup(); 
                    else if (picker2.IsTimePopupVisible()) 
                        picker2.ToggleTimePopup(); 
                } 
                </script> 
     
                <asp:Label ID="Label1" runat="server" Text="Label With ToolTip"></asp:Label> 
                <telerik:RadToolTip ID="Tooltip1" runat="server" TargetControlID="Label1" IsClientID="true" 
                    ManualClose="true" Height="100px" Width="500px" CssClass="pickerFix" OnClientBeforeHide="OnBeforeHide"
                    <radCln:RadDatePicker ID="RadDatePicker1" runat="server"
                    </radCln:RadDatePicker> 
                    <radCln:RadDateTimePicker ID="RadDateTimePicker1" runat="server"
                    </radCln:RadDateTimePicker> 
                </telerik:RadToolTip> 
            </div> 
        </form> 
    </body> 
    </html> 


    Sorry for the inconvenience.


    Best wishes,
    Manuel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Jimmie Houts
    Jimmie Houts avatar
    7 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2007 Link to this post

    This fix doesn't seem to be working for me. The calendar is still hidden. I have the tooltip inside of a prometheus raddock. Could that be the problem?
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 26 Jul 2007 Link to this post

    Hi Jimmie Houts,
    In the case of RadDock, you will additionally have to handle the ClientDragEnd event of the Dock object and set the zIndex of the Popup when the page first loads:

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">    
        /* the id of the wrapper element is formed like this:    
            
            RadTooltipWrapper_[your-RadToolTip-ID]     
            
        */    
        #RadToolTipWrapper_Tooltip1    
        {    
            z-index: 49999 !important;    
        }    
        </style> 
    </head> 
    <body onload="SetMyZIndex();">  
        <script type="text/javascript">  
        function ClientDragEndHandler(obj, args)  
        {  
            var el = obj.get_element();  
            el.style.zIndex = "1";  
        }  
        function SetMyZIndex()  
        {  
            RadCalendarNamespace.Popup.zIndex = "50002";  
        }  
        </script> 
        <form id="form1" runat="server">  
            <asp:ScriptManager runat="server" ID="ScriptManager">  
            </asp:ScriptManager> 
            <div> 
     
                <script type="text/javascript">    
                // in order to avoid a floating open calendar / time popup if the tooltip is closed prior to date / time selection    
                function OnBeforeHide()    
                {    
                    var picker1 = <%= RadDatePicker1.ClientID %>;    
                    var picker2 = <%= RadDateTimePicker1.ClientID %>;    
                        
                    if (picker1.IsPopupVisible())    
                        picker1.TogglePopup();    
                    else if (picker2.IsPopupVisible())    
                        picker2.TogglePopup();    
                    else if (picker2.IsTimePopupVisible())    
                        picker2.ToggleTimePopup();    
                }    
                </script> 
     
                <telerik:RadDock ID="RadDock1" runat="server" Height="200px"   
                    OnClientDragEnd="ClientDragEndHandler">  
                    <ContentTemplate> 
                        <asp:Label ID="Label1" runat="server" Text="Label With ToolTip"></asp:Label> 
                        <telerik:RadToolTip ID="Tooltip1" runat="server" TargetControlID="Label1"                           
                            ManualClose="true" Height="100px" Width="500px" CssClass="pickerFix"   
                            OnClientBeforeHide="OnBeforeHide">  
                            <radCln:RadDatePicker ID="RadDatePicker1" runat="server">  
                            </radCln:RadDatePicker> 
                            <radCln:RadDateTimePicker ID="RadDateTimePicker1" runat="server">  
                            </radCln:RadDateTimePicker> 
                        </telerik:RadToolTip> 
                   </ContentTemplate> 
                </telerik:RadDock> 
            </div> 
        </form> 
    </body> 
    </html> 


    Regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Jimmie Houts
    Jimmie Houts avatar
    7 posts
    Member since:
    Mar 2007

    Posted 26 Jul 2007 Link to this post

    That worked perfectly, thank you!
  9. Nicolaï
    Nicolaï avatar
    160 posts
    Member since:
    Apr 2008

    Posted 30 Sep 2009 Link to this post

    Hi,

    similar problem: raddatepicker inside a modal tooltip.
    The calendar appears under the tooltip.
    Adding
    <style type="text/css">
        #RadToolTipWrapper_editContainerTT
        {
            z-index: 49999 !important;
        }
    </style>

    did not help.
    also noticed you have CssClass="pickerFix", but I don't see its definition..?
    Has anything changed in later versions?

    TT is like this:
        <telerik:RadToolTip runat="server" ID="editContainerTT" Skin="Office2007"
            RelativeTo="Element" Position="TopRight"
            ShowEvent="FromCode" HideEvent="FromCode" Modal="true"
            OnClientShow="OnClientShow_cont">
            <table rules="all">
            <tr>
             [...many things]
                <td>
                    <telerik:RadDatePicker runat="server" ID="cTestDateTB" style="z-index:9999;">
                        <Calendar runat="server" style="z-index:9999;"></Calendar>
                    </telerik:RadDatePicker>
                </td>
                <td>
                    <telerik:RadDatePicker runat="server" ID="nTestDateTB">
                    </telerik:RadDatePicker>
                </td>


    Best regards,
    Nicolai

    update: not only did it not help, but it made my radcombo also appear under the tooltip (to which I had added  ZIndex="9999").
  10. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 02 Oct 2009 Link to this post

    Hello Nicolai,
    You should use the ZIndex property of the RadDatePicker to set the correct z-index for the calendar:
    <telerik:RadToolTip runat="server" ID="editContainerTT" TargetControlID="Label1" Skin="Office2007" RelativeTo="Element" 
        Position="TopRight" HideEvent="FromCode" Modal="true"
        <table rules="all"
            <tr> 
                <td> 
                    <telerik:RadDatePicker runat="server" ID="cTestDateTB" ZIndex="9999"
                        <Calendar ID="Calendar1" runat="server"
                        </Calendar> 
                    </telerik:RadDatePicker> 
                </td> 
                <td> 
                    <telerik:RadDatePicker runat="server" ID="nTestDateTB" ZIndex="9999"
                    </telerik:RadDatePicker> 
                </td> 
            </tr> 
        </table> 
    </telerik:RadToolTip> 

    Sincerely yours,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017