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

Display ToolTip as Custom Command on RadDock

5 Answers 82 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
virt
Top achievements
Rank 1
virt asked on 19 Nov 2008, 02:05 PM
Hello,

I'm trying to display a ToolTip as Custom Command on the RadDoc. I have following code so far:

<script type="text/javascript"
         function showToolTip(dock, args) { 
             var tooltip = $find(args.Command.get_name()); 
             tooltip.show(); 
         } 
</script> 
..... 
..... 
<telerik:RadToolTip ID="RadToolTip1" runat="server"  > 
        <h1>This is Title</h1> 
        <p>And some very big description</p> 
        <p>More of the details and descriptions</p> 
</telerik:RadToolTip> 
...... 
...... 
<telerik:RadDock ID="RadDock1" runat="server" Width="100%"  
                Title="FREQUENTLY USED FEATURES" DefaultCommands="None"  
                EnableDrag="False"
                <Commands> 
                    <telerik:DockCommand Name="RadToolTip1" OnClientCommand="showToolTip" /> 
                </Commands> 
                <ContentTemplate> 
                </ContentTemplate> 
</telerik:RadDock> 
 

When I click Custom Command icon in RadDock title I'm getting JS error:

tooltip is null
at line:  tooltip.show();

Any help is greatly appreciated. If there is a better approach, please let me know.

Thank you,
a.



5 Answers, 1 is accepted

Sort by
0
Petko
Telerik team
answered on 19 Nov 2008, 03:46 PM
Hi Andrei,

The provided code seems to be correct. I tried to reproduce the problem locally, based on your code, but unfortunately to no avail - at my side everything works as expected.

In the following code line:
var tooltip = $find(args.Command.get_name()) 

the $find method returns NULL, because it can't find the RadToolTip, by some reason but since I do not have your code I cannot tell you what is the exact reason.

If the problem still persist, please, send us your whole ASPX code, where we can observe, what cause this error.


All the best,
Petko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
virt
Top achievements
Rank 1
answered on 19 Nov 2008, 04:11 PM
Petko,

It seems that the issue appears when there is a MasterPage present.

Here is the code for the Master page (Site1.master):
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %> 
<%@ 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
    <asp:ContentPlaceHolder ID="head" runat="server"
    </asp:ContentPlaceHolder> 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    </telerik:RadScriptManager><div id="header"
    <div> 
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"
         
        </asp:ContentPlaceHolder> 
    </div> 
    </form> 
</body> 
</html> 
 

And here is the code for the page that uses Master page (Default.aspx):
<%@ Page Language="C#" MasterPageFile="~/Site1.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WebApplication1._Default" Title="Untitled Page" %> 
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"
     <script type="text/javascript"
         function showToolTip(dock, args) { 
             var tooltip = $find(args.Command.get_name()); 
             tooltip.show(); 
         } 
    </script> 
 
</asp:Content> 
 
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" > 
    <telerik:RadToolTip ID="RadToolTip1" runat="server" EnableEmbeddedSkins="false" > 
        <h1>This is Title</h1> 
        <p>And some very big description</p> 
        <p>More of the details and descriptions</p> 
    </telerik:RadToolTip> 
    <div> 
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server" > 
        <telerik:RadDockZone ID="RadDockZone1" runat="server"  
            Width="225px" > 
             
            <telerik:RadDock ID="RadDock1" runat="server"  Width="100%"  
                Title="FREQUENTLY USED FEATURES" DefaultCommands="None"  
                EnableDrag="False"
                <Commands> 
                    <telerik:DockCommand Name="RadToolTip1" OnClientCommand="showToolTip" /> 
                </Commands> 
                <ContentTemplate> 
                 
                </ContentTemplate> 
            </telerik:RadDock> 
            
        </telerik:RadDockZone> 
    </telerik:RadDockLayout> 
    </div> 
</asp:Content> 

Regards,
a.


0
Svetlina Anati
Telerik team
answered on 20 Nov 2008, 08:46 AM
Hi Andrei,

I already answered your other thread and for your convenience I pasted my reply below:

Thank you for the provided code, I examined it and I was able to reproduce the problem. The reason for the problem is not in the RadToolTip client-side API but in the fact that you are using a MasterPage. The MasterPage is an INaming Container and it changes the controls' IDs - the declared tooltip's ID is not RadToolTip1 but it actually becomes ctl00_ContentPlaceHolder1_RadToolTip1. This being said, the $find method cannot find a control with ID RadToolTip1 and that is why it returnd null.

You can solve the problem in two manners:

  1. Use the code blocks syntax as shown below:

     <script type="text/javascript">  
             function showToolTip(dock, args) {  
                 var tooltip = $find("<%=RadToolTip1.ClientID %>");  
                 tooltip.show();  
             }  
        </script> 
  2. Hard code the actual client ID as Name of the dock command as shown below:


          <Commands> 
                        <telerik:DockCommand Name="ctl00_ContentPlaceHolder1_RadToolTip1" OnClientCommand="showToolTip" /> 
                    </Commands> 

I hope that the provided explanations and suggestions are helpful. Let me know how it goes


Kind regards,
Svetlina
the Telerik team


Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
virt
Top achievements
Rank 1
answered on 20 Nov 2008, 02:20 PM
Svetlina,

Thank you for your reply but as you probably understand that doesn't really resolve this issue. Using any of the scenarios you have suggested basically requires me to HARDCODE the name of the ToolTip into JS function or HARDCODE the name of the containers into name of the Dock command.

Are you saying that Telerik controls are not designed to work with Master pages in .NET?

Thank you,
a.
0
Svetlina Anati
Telerik team
answered on 21 Nov 2008, 02:27 PM
Hello Andrei,

Hello Andrei,

I already answered your other thread and for your convenience and for others who may encounter the same problem I pasted my reply below:

As I already explained, the MasterPage as a User Control, etc. is an INaming Container and it changes the controls IDs. In most scenarios, the ClientID is equal to the server ID and your code will work but when using INaming Containers this is not so. This is not related to RadControls at all but to the way the Framework works - if you replace the RadToolTip with whatever standard server control you like (button, textbox, etc) you will get exactly the same behavior. The $find method needs a ClientID in order to find the control - this method is not ours and it is part of the ASP.NET AJAX Framework. It is up to the developer to manage to extract the correct ClientID - in your project you just passed an incorrect string and I suggested you two different manners to get the desired behavior.

If you succeed to make the $find method work with a server ID of a standard control when using MasterPage or you find another way to extract the ClientID, please send me a sample, fully working demo which shows this and I will immediately replicate your logic in order to be used by RadControls.

I hope that my explanations are helpful and for your convenience I am also providing this link. Let me know if you need further assistance or if you have additional questions.


Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
ToolTip
Asked by
virt
Top achievements
Rank 1
Answers by
Petko
Telerik team
virt
Top achievements
Rank 1
Svetlina Anati
Telerik team
Share this question
or