Configure radDoc to work with TooltipManager

7 posts, 0 answers
  1. Kian Cha
    Kian Cha avatar
    22 posts
    Member since:
    May 2007

    Posted 03 Jan 2008 Link to this post

    When I add radTooltipManager to the page, radDock control displays two "Collapse" tooltip, one for TooltipManager and one for the RadDock control.

    How do I configure radDock control to only show tooltip from tooltip Manager?

    Thx.

    Kian
  2. Petya
    Admin
    Petya avatar
    869 posts

    Posted 04 Jan 2008 Link to this post

    Hi Kian Cha,

    This is a problem we are aware of and have logged it in our TODO list. For now the only workaround we can offer you is the following:

            <asp:scriptmanager id="ScriptManager" runat="server"
            </asp:scriptmanager> 
            <telerik:radtooltipmanager runat="server" id="RadTooltipManager1" /> 
     
                <telerik:raddocklayout id="RadDockLayout1" runat="server"
                    <telerik:raddockzone id="RadDockZone1" runat="server" minheight="300px" orientation="Vertical" 
                        style="float: left; margin-right: 20px;" width="200px"
                        <telerik:raddock onclientinitialize="OnClientInitialize" id="RadDock1" runat="server" text="RadDock 1" title="RadDock 1" 
                            width="200px"
                        </telerik:raddock> 
                    </telerik:raddockzone> 
                </telerik:raddocklayout> 
             
            <script type="text/javascript"
            function OnClientInitialize(dock) 
            { 
                dock.getCommand("ExpandCollapse").get_element().removeAttribute("title"); 
            } 
            </script> 

    Hope this helps.

    Regards,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Kian Cha
    Kian Cha avatar
    22 posts
    Member since:
    May 2007

    Posted 09 Jan 2008 Link to this post

    Hi,

    With the new sample code you've provided, I am still getting 2 tooltips. This is what I am seeing...

    When the dock control is expanded:
    RadDock tooltip = "collapse"
    TooltipManger tooltip = "collapse"

    When the dock control is collapsed:
    RadDock tooltip = "expand"
    TooltipManger tooltip = "collapse"

    Any ideas?

    Thanks.

    Kian
  4. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 15 Jan 2008 Link to this post

    Hi,

    RadDock control's command ExpandCollapse has a title which the browser uses to show a tooltip. RadDock changes this title every time command's state is changed, e.g. it is expanded or collapsed. The RadToolTipManager also uses element's title to show a tooltip. The main idea to hide RadDock's default tooltip is to find the title of the corresponding element, to give it to the tooltip and then remove the title so that the browser does not display it. However, there is no proper event which happens early enough so that you can handle it and do the above described procedure. The browser finds the dock command's title earlier and shows the tooltip. That is why, RadDock's default tooltip will always be shown the first time. To stop RadDock's default tooltip showing after the first time the best event we can suggest using is OnClientBeforeShow event of the RadToolTipManager. The code below demonstrates our suggestion:

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:scriptmanager id="ScriptManager" runat="server">  
            </asp:scriptmanager> 
            <script type="text/jscript">        
            function onClientBeforeShowHandler(sender, args)  
            {  
                var dock = $find("<%=RadDock1.ClientID %>");  
                var elem = dock.getCommand("ExpandCollapse").get_element();  
                  
                var title = elem.getAttribute("title");    
                if (!title) return;  
                  
                var div = document.createElement("DIV");  
                              
                div.innerHTML = title;              
                elem.removeAttribute("title");                
                sender.set_contentElement(div);  
            }   
            </script> 
            <telerik:radtooltipmanager id="Manager1" onclientbeforeshow="onClientBeforeShowHandler"runat="server" /> 
            <telerik:raddocklayout id="RadDockLayout1" runat="server">  
                <telerik:raddockzone id="RadDockZone1" runat="server" minheight="300px" orientation="Vertical" 
                    style="float: left; margin-right: 20px;" width="200px">  
                    <telerik:raddock id="RadDock1" runat="server" text="RadDock 1" title="RadDock 1" width="200px">  
                    </telerik:raddock> 
                </telerik:raddockzone> 
            </telerik:raddocklayout> 
        </form> 
    </body> 
    </html> 

    Please, note that the provided code does not completely solve the problem and the first time you will continue observing the two tooltips. However, this is the only workaround we can suggest you for the moment. The problem is due to the way the two controls interact together and as we mentioned in our previous reply we have logged the issue in our TODO list.

    If you have other question do not hesitate to contact us again.

    Best wishes,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Glenn
    Glenn avatar
    3 posts
    Member since:
    Jun 2007

    Posted 13 May 2009 Link to this post

    I am working on what I think is the same problem in the latest build.  My controls show two tooltips (one from the TooltipManager and one from the RadDock I think) and they are correct.  And then when I collapse one that was expanded on load the TooltipManager one (the prettier looking graphical one) will continue to say "collapse" and the simpler text box one will update and be correct... now showing "expand".

    In my situation I have 1 TooltipManager, 2 DynamicRadDockZones (two columns essentially)  and I think this may make the code workaround you propose not apply to me.  When I add the OnClientBeforeShow="onClientBeforeShowHandler" to the RadTooltipManager it seems that my client side script isn't called.
  6. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 14 May 2009 Link to this post

    I managed to create a working code which handles OnCLientBeforeShow event,e.g.
    <%@ 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 > 
        <title></title>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <script type="text/javascript">  
            function TooltipBeforeShowHandler(sender, args) {  
     
                var newTitle = sender.get_targetControl().title;  
                if (newTitle) {  
                    sender.set_text(newTitle);  
                }  
                  
            }      
        </script>    
            
        <asp:ScriptManager ID="ScriptManagerr1" runat="server"></asp:ScriptManager> 
        <telerik:RadToolTipManager ID="RadTooltipManager1" runat="server"   
        AutoTooltipify="true" OnClientBeforeShow="TooltipBeforeShowHandler">  
        </telerik:RadToolTipManager> 
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
          
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="300px">  
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1">  
                    <ContentTemplate> 
                        a  
                    </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock2">  
                    <ContentTemplate> 
                        b  
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
        </telerik:RadDockLayout> 
        </form> 
    </body> 
    </html> 
  7. Glenn
    Glenn avatar
    3 posts
    Member since:
    Jun 2007

    Posted 14 May 2009 Link to this post

    That is concise and works great.  Thanks very much Obi-Wan!
Back to Top