This is a migrated thread and some comments may be shown as answers.

RadDatePicker doesnt work with tooltip

8 Answers 331 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
possible
Top achievements
Rank 1
possible asked on 28 Apr 2007, 09:19 AM
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

8 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 02 May 2007, 02:19 PM
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
0
ragingpixel
Top achievements
Rank 1
answered on 03 Jul 2007, 05:01 AM
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?
0
Giuseppe
Telerik team
answered on 06 Jul 2007, 01:47 PM
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
0
Jimmie Houts
Top achievements
Rank 1
answered on 23 Jul 2007, 05:59 PM
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?
0
Tsvetie
Telerik team
answered on 26 Jul 2007, 03:42 PM
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
0
Jimmie Houts
Top achievements
Rank 1
answered on 26 Jul 2007, 06:28 PM
That worked perfectly, thank you!
0
Nicolaï
Top achievements
Rank 2
answered on 30 Sep 2009, 12:57 PM
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").
0
Tsvetie
Telerik team
answered on 02 Oct 2009, 08:50 AM
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.
Tags
ToolTip
Asked by
possible
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
ragingpixel
Top achievements
Rank 1
Giuseppe
Telerik team
Jimmie Houts
Top achievements
Rank 1
Nicolaï
Top achievements
Rank 2
Share this question
or