Click here to Skip to main content
15,889,200 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi I ve created a asp tree view and binded tree view from a dataset .I want to show the content of tree view in a pop up on mouse over tree view nodes.I have some description for each node in the dataset how to show them in a pop on mouse over?? The pop up has to pull its contents from the dataset.its not just thro' node.tooltip="sometext".Is dat possible?? pls help!TQ
Posted

1 solution

You can use a css class for treenodes, Insert the content for the popup within a hidden div to each TreeNode and use jquery or javascript to display the divs content on hover.

I am providing a sample so you understand what i mean.


XML
<asp:TreeView ID="LinksTreeView" runat="server" OnTreeNodeDataBound="Data_Bound" >            
            <NodeStyle CssClass="TreeItem" />
        </asp:TreeView>

Please take note of the NodeStyle added. The CSS class 'TreeItem' gets added to anchor tags rendered for each node of treeview. We later use this class to add hover function to node using jquery.

Add a hidden div with required content(replace 'Some Content' with data from Dataset) to Node.text during databind.
C#
void Data_Bound(Object sender, TreeNodeEventArgs e)
  {

    string Prefix = "<div style='display:none;' class='content'>Some                     Content</div>";  
    e.Node.Text = Prefix + e.Node.Text;

  }

The following script will alert the contents of the div added to Node.Text. Please customize it for your needs. The script searches inside the anchor tag hovered for a div with class 'content' and alerts its innerHTML.

XML
<script type="text/javascript">


        $(document).ready(function() {
            $('a.TreeItem').hover(function() {
                alert($($(this).find('div.content')).html());
            });
        });

            </script>


Hope this helps.
 
Share this answer
 
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900