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:
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
0
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:
Codebehind:
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.
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> |
| 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); |
| } |
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
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
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:
Code-behind:
Sincerely yours,
Petko
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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
Rank 1
answered on 12 Dec 2008, 04:51 AM
thanks...very nice example.