Show tooltip for each treeview node

5 posts, 1 answers
  1. shahab
    shahab avatar
    22 posts
    Member since:
    Oct 2012

    Posted 29 Sep 2008 Link to this post

    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);  
               
     
            }  
     
        } 
  2. Petko
    Admin
    Petko avatar
    45 posts

    Posted 02 Oct 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. shahab
    shahab avatar
    22 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2008 Link to this post

    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);  
     
        }   

     

  5. Answer
    Petko
    Admin
    Petko avatar
    45 posts

    Posted 09 Oct 2008 Link to this post

    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.
  6. venkatraman
    venkatraman avatar
    4 posts
    Member since:
    Sep 2008

    Posted 11 Dec 2008 Link to this post

    thanks...very nice example.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017