ASP.Net Treeview and RadToolTip

[Mark Bourisaw]

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

[Princy]

Hello,

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

Thanks,
Princy.

[Svetlina Anati]

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

[Mark Bourisaw]

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>

[Svetlina Anati]

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

[Aarsh]

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

[Marin Bratanov]

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

[Aarsh]

http://www.telerik.com/community/forums/aspnet-ajax/treeview/radtreeview-and-tooltip.aspx#2307150