ASP.Net Treeview and RadToolTip

8 posts, 0 answers
  1. Mark Bourisaw
    Mark Bourisaw avatar
    5 posts
    Member since:
    Mar 2006

    Posted 03 Jan 2012 Link to this post

    How do I get the node from the RadToolTipManager_AjaxUpdate?  I have it associated with the the treeview control and it will fire the event but there is no way to know what node value it is.

    Thanks
    Mark
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Jan 2012 Link to this post

    Hello,

    Take a look into the following demo.
    ToolTip / RadToolTip for RadTreeView

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jan 2012 Link to this post

    Hello Mark,

    In the demo Princy provided, a custom value is passed in the both approaches as follows:

    1) In the server-side approach, the value is added here:

    protected void RadTreeView_NodeExpand(object sender, RadTreeNodeEventArgs e)
            {
     
                if (e.Node.Level == 0 && e.Node.Nodes.Count == 0)
                {
                    DataTable data = getData(e.Node.Value);
                    foreach (DataRow row in data.Rows)
                    {
                        RadTreeNode node = new RadTreeNode();
                        node.Text = row["ProductName"].ToString();
                        node.Value = row["ProductID"].ToString();
                        node.Attributes["id"] = Guid.NewGuid().ToString();
                        
                        e.Node.Nodes.Add(node);
                        if (((RadTreeView)(sender)).ID == "RadTreeView1")
                        {
                            RadToolTipManager1.TargetControls.Add(node.Attributes["id"], node.Value, true);
                        }
                    }
                    e.Node.Expanded = true;
                }
      
            }

     
    2) In the client-side approach, the value is added here:

    function OnClientMouseOver(sender, args)
          {
            var nodeElem = args.get_node();
            if(nodeElem.get_level() != 0)
            {
                var node = nodeElem.get_textElement();
                                             
                var tooltipManager = $find("<%= RadToolTipManager2.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(node);
        
                //Create a tooltip if no tooltip exists for such element
                if (!tooltip)
                {
                    tooltip = tooltipManager.createToolTip(node);
                    tooltip.set_value(nodeElem.get_value());
                    tooltip.show();
                }
            }
          }


    If you have tooltipified the nodes without adding a value (which is also valid but not enough for your case), please use one of the above approaches, depending on your exact implementation.

    After you have associated the value, you can easily read it through the arguments of the OnAjaxUpdate event as follows:

    protected void RadToolTipmanager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
           {
               ProductDetails details = (ProductDetails)this.LoadControl("ProductDetails.ascx");
               details.ProductID = e.Value;
               e.UpdatePanel.ContentTemplateContainer.Controls.Add(details);
           }

    I hope that my reply is detailed enough and helpful, let me know how it goes.

    All the best,
    Svetlina Anati
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Mark Bourisaw
    Mark Bourisaw avatar
    5 posts
    Member since:
    Mar 2006

    Posted 04 Jan 2012 Link to this post

    Sorry should have said that I was using the ASP.Net TreeView control not the RadTreeView control.  Will the tool tip work with this control?

    Here is how I have it setup.  If I do not set the ToolTipTargetControl to the ID of the Treeview it will not work.  I may not be doing it correctly but when I add the nodes with the "node.Value" it does not return that value.
    <asp:TreeView ID="tv" runat="server" ShowLines="True" 
                ontreenodecheckchanged="tv_TreeNodeCheckChanged" ShowCheckBoxes="Leaf" 
                onselectednodechanged="tv_SelectedNodeChanged">
                <Nodes>
                    <asp:TreeNode Text="Top" Value="0">
                        <asp:TreeNode Text="SubNode" Value="1" ></asp:TreeNode>
                        <asp:TreeNode Text="One Test" Value="2" ></asp:TreeNode>
                        <asp:TreeNode Text="Two Test" Value="3" ></asp:TreeNode>
                    </asp:TreeNode>
                </Nodes>
            </asp:TreeView>
            
            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" onajaxupdate="RadToolTipManager1_AjaxUpdate">
                <TargetControls>
                    <telerik:ToolTipTargetControl TargetControlID="tv" Value="Test" />
                </TargetControls>
            </telerik:RadToolTipManager>
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Jan 2012 Link to this post

    Hello Mark,

    Your code sets the whole treeview as a target control and not the separate nodes and thus it is invalid for the scenario you describe.

    Basically the standard asp treeview cannot be tooltipified in a manner of having full control over targets and values in the OnAjaxUpdate event. This is so because of the following reasons:

    1) The Node cannot have an added attribute - if you add an attribute the project will not compile. You can only make a custom class which inherits and extends with properties but the IDs you will set will not render as IDs to the HTML and thus the tooltip will not show

    2) The standard treeview also does not support templates.

    What I can suggest is the following:

    1) You can set the desired content as a standard ToolTip to the node e.g as shown below (this is with code behind in case you need database access or other complex logic, in case of simple string you can directly use markup):
     

    Copy Code
    Node.NavigateUrl = String.Empty
    Node.ToolTip = Row("LongDesc")

    After that you can configure the tooltip manager to replace the standard tooltip by using AutoToolTipify (no need for OnAjaxUpdate event or manually adding target controls) as shown below:

    Copy Code
    <telerik:RadToolTipManager Width="215px" Height="260px" RelativeTo="Element" ID="RadToolTipManager1"
    runat="server" OffsetX="15" Skin="Telerik" AutoTooltipify="true" ToolTipZoneID="TreeView"
    Position="MiddleRight" ManualClose="true">
    </telerik:RadToolTipManager>
    <div id="TreeView">
    <asp:TreeView ID="TreeView1" runat="Server" ShowExpandCollapse="true" ImageSet="Custom"
    CollapseImageUrl="~/images/APCollapse.png" ExpandImageUrl="~/images/APExpand.png"
    ExpandDepth="0


    2) If your scenario is more complex and you need to execute server logic on demand as well, not only to display some content you should replace the treeview with a RadTreeView.

    Let  me know how it goes and whether you need further assistance or in case you have additional questions.

     

    Regards,
    Svetlina Anati
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 23 Sep 2012 Link to this post

    Hi Svetlina,

    Your solution helped me much, but I am having a bit different scenario here, I already have the nodes added programatically so is there any way that I can add the tool tip text dynamically using C# code behind ?

    One more thing, my understanding purposes I had created a demo application, in which I had been using AjaxUpdate event. But it looks like as per the code you provided, we do not need to use it ... Correct ?


    Thanks in advance,
    -Aarsh
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 25 Sep 2012 Link to this post

    Hi Aarsh,

    As I noted in your other thread - I suggest you examine this online demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltiptreeview/defaultcs.aspx. For more suggestions on the matter I suggest you take a look at my answer there: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/rad-tool-tip-manager-and-each-rad-treenode.aspx#2304157.


    Kind regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 26 Sep 2012 Link to this post

    http://www.telerik.com/community/forums/aspnet-ajax/treeview/radtreeview-and-tooltip.aspx#2307150
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017