Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > ASP.Net Treeview and RadToolTip

• Mark Bourisaw

  Posted on Jan 3, 2012 (permalink)

  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

  Reply

• Princy MVP

  Posted on Jan 4, 2012 (permalink)

  Hello,
  
  Take a look into the following demo.
  ToolTip / RadToolTip for RadTreeView
  
  Thanks,
  Princy.

  Reply


• Svetlina Anati Svetlina Anati

  Posted on Jan 4, 2012 (permalink)

  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

  Reply

• Mark Bourisaw

  Posted on Jan 4, 2012 (permalink)

  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>

  Reply

• Svetlina Anati Svetlina Anati

  Posted on Jan 5, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > ASP.Net Treeview and RadToolTip