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

Show tooltip for each treeview node

4 Answers 381 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
shahab
Top achievements
Rank 1
shahab asked on 29 Sep 2008, 10:44 AM
Hi could anyone please guide me in the right direction.
 
I am trying to implement a rad tooltip which displays  dynamic content for each node when the user hovers the mouse over.

I have seen the samples provided on this site regarding binding it to the grid but not to a treeview. Should I bind the Rad tooltip in OnNodeCreated or OnNodeClick ?

Thanks in advance.

Just for the info this is how I bind the treeview:

private void LoadRootNodes()  
    {  
        ExerciseTypeCollection ext = new ExerciseTypeCollection();  
        ext.LoadAll();  
        tvwExercises.Nodes.Clear();  
 
        foreach (ExerciseType item in ext)  
        {  
            RadTreeNode EX_TYPE_NODE = new RadTreeNode();  
            EX_TYPE_NODE.Text = item.Name.ToString();  
            EX_TYPE_NODE.Value = item.Id.ToString();  
            EX_TYPE_NODE.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;  
            tvwExercises.Nodes.Add(EX_TYPE_NODE);  
           
 
        }  
 
    } 

4 Answers, 1 is accepted

Sort by
0
Petko
Telerik team
answered on 02 Oct 2008, 10:21 AM
Hi Shahab,

I prepared for you a simple example which illustrates how to show a tooltip for each node. The content in the tooltip is loaded via AJAX.
ASPX:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!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>Untitled Page</title> 
    <script type="text/javascript">  
    function showToolTip(element)   
    {   
        var tooltipManager = $find("<%=RadTooltipManager1.ClientID%>");  
        //If the user hovers the image before the page has loaded, there is no manager created  
        if (!tooltipManager) return;   
        //Find the tooltip for this element if it has been created   
        var tooltip = tooltipManager.getToolTipByElement(element);   
        //Create a tooltip if no tooltip exists for such element  
        if (!tooltip)   
          {  
              tooltip = tooltipManager.createToolTip(element);   
          }  
      tooltip.show();  
    }    
    function NodeClicking(obj,args)  
    {  
        showToolTip(obj._element);  
    }  
    </script> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager" runat="server">  
        </asp:ScriptManager> 
    <div> 
     <telerik:RadToolTipManager   
            ID="RadTooltipManager1"   
            runat="server" 
            OnAjaxUpdate="RadTooltipManager1_AjaxUpdate" 
            ManualClose="true" 
            AutoTooltipify="false" 
            >              
            </telerik:RadToolTipManager> 
              
            <telerik:RadTreeView ID="RadTreeView1" runat="server" Width="300px" 
            OnClientMouseOver="NodeClicking">        
            </telerik:RadTreeView>   
    </div> 
    </form> 
</body> 
</html> 
 
Codebehind:
 protected override void OnInit(EventArgs e)  
    {  
        base.OnInit(e);  
        for (int i = 0; i < 4; i++)  
        {  
            RadTreeNode node = new RadTreeNode();  
            node.ToolTip = node.Text = "node " + i.ToString();  
            node.Value = i.ToString();  
            for (int j = 0; j < 4; j++)  
            {  
                RadTreeNode nodeChild = new RadTreeNode();  
                nodeChild.ToolTip = nodeChild.Text = node.Text + " " + j.ToString();  
                nodeChild.Value = node.Value + j.ToString();  
                node.Nodes.Add(nodeChild);  
            }  
            RadTreeView1.Nodes.Add(node);  
        }  
    }  
    protected void Page_Load(object sender, EventArgs e)  
    {  
 
 
    }  
    protected void RadTooltipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)  
    {  
        Label lbl = new Label();  
        lbl.ID = "myLBL";  
        lbl.Text = System.DateTime.Now.ToString();  
          
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(lbl);  
 
    } 
You can find a simple online example which uses the RadTooltipManager client-side api to show the tooltip - here:
http://demos.telerik.com/aspnet/prometheus/ToolTip/Examples/RadToolTipManagerClientAPI/DefaultCS.aspx



Sincerely yours,
Petko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
shahab
Top achievements
Rank 1
answered on 03 Oct 2008, 12:42 PM

Hi Petko
Thank you so much for your prompt response. One last thing if you could assist me with be great. How can I pass the selected node value in the ajax update, I tried calling the "NodeClicking" function on  the following client side events:
OnClientNodeClicked
OnClientMouseOver 

and made the following adjustments to your code  to get the selected node id. I do eventually get the selected node's text but I have to click the node two to three times before the changes are reflected. any advise would be muchly appreciated.
thanks
shahab

    protected void RadTooltipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)  
    {  
        Label lbl = new Label();  
        lbl.ID = "myLBL";  
        if (tvwUserTemplate.SelectedNodes.Count > 0)  
        {  
            lbl.Text =  tvwUserTemplate.SelectedNode.Text.ToString();  
        }else 
        {  
            lbl.Text = System.DateTime.Now.ToString();  
        }  
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(lbl);  
 
    }   

 

0
Accepted
Petko
Telerik team
answered on 09 Oct 2008, 08:23 AM
Hi shahab,

I see in your first post that you want to "implement a rad tooltip which displays  dynamic content for each node when the user hovers the mouse over." This action doesn't fire OnClientNodeClicked event and you can't get the selected node from treeview, because the node is not clicked and is not selected.

That is why when you asked how to "pass the selected node value in the ajax update" in your second post, I assumed that you wanted to pass the value of the node, that the mouse is hovering over, in the tooltip. 

Also, you can't use OnClientMouseOver , because the conception of  my approach is, not to use this server-side handler, but OnAjaxUpdate to do a PostBack.
That's why we should set the node value in one HiddenField element, so we can use it in RadTooltipManager1_AjaxUpdate.
I'm sending you a code, that demonstrate this approach.

ASPX:

<head>   
    <title>Untitled Page</title>   
    <script type="text/javascript">    
    function showToolTip(element)     
    {     
        var tooltipManager = $find("<%=RadTooltipManager1.ClientID%>");    
        //If the user hovers the image before the page has loaded, there is no manager created    
        if (!tooltipManager) return;     
        //Find the tooltip for this element if it has been created     
        var tooltip = tooltipManager.getToolTipByElement(element);     
        //Create a tooltip if no tooltip exists for such element    
        if (!tooltip)     
          {    
              tooltip = tooltipManager.createToolTip(element);     
          }    
      tooltip.show();    
    }      
    function ClientMouseOver(obj,args)    
    {    
        $get("HiddenField1").value = args.get_node().get_value() ; //here we set Node.Value to hiddenField   
        showToolTip(obj._element);   
    }    
    </script>   
</head>   
<body>   
    <form id="form1" runat="server">    
        <asp:ScriptManager ID="ScriptManager" runat="server">    
        </asp:ScriptManager>   
    <div>   
    <asp:HiddenField ID="HiddenField1" runat="server" /> 
     <telerik:RadToolTipManager     
            ID="RadTooltipManager1"     
            runat="server"   
            OnAjaxUpdate="RadTooltipManager1_AjaxUpdate"   
            ManualClose="true"   
            AutoTooltipify="false">                
            </telerik:RadToolTipManager>   
                
            <telerik:RadTreeView ID="RadTreeView1" runat="server" Width="300px"   
            OnClientMouseOver="ClientMouseOver">          
            </telerik:RadTreeView>     
    </div>   
    </form>   
</body>  

Code-behind:

   protected override void OnInit(EventArgs e)  
    {  
        base.OnInit(e);  
        for (int i = 0; i < 4; i++)  
        {  
            RadTreeNode node = new RadTreeNode();  
            nodenode.ToolTip = node.Text = "node " + i.ToString();  
            node.Value = i.ToString();  
            for (int j = 0; j < 4; j++)  
            {  
                RadTreeNode nodeChild = new RadTreeNode();  
                nodeChildnodeChild.ToolTip = nodeChild.Text = node.Text + " " + j.ToString();  
                nodenodeChild.Value = node.Value + j.ToString();  
                node.Nodes.Add(nodeChild);  
            }  
            RadTreeView1.Nodes.Add(node);  
        }  
    }  
      
    protected void RadTooltipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)  
    {     
        Label lbl = new Label();  
        lbl.ID = "myLBL";  
        lbl.Text = HiddenField1.Value; //HiddenField1.Value keeps Node.Value  
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(lbl);  
 
    }  





Sincerely yours,
Petko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
venkatraman
Top achievements
Rank 1
answered on 12 Dec 2008, 04:51 AM
thanks...very nice example.
Tags
ToolTip
Asked by
shahab
Top achievements
Rank 1
Answers by
Petko
Telerik team
shahab
Top achievements
Rank 1
venkatraman
Top achievements
Rank 1
Share this question
or