The ASP.NET 2.0 Tree View control is a new
control introduced by ASP.NET 2.0 that is available under the Navigation Control
in the
Toolbox. The use of
Tree View control is to display hierarchical data (i.e. tree structure). You
can use this control when you want to display a navigation menu, displaying
database records from database tables in a Master/Detail relation, displaying
the contents of an XML document, or displaying files and folders from the file
system. The Tree View control consists of following nodes: - Root Node
- A root node is a node that has no parent node. It has one or more child
nodes.
- Parent
Node - A node that has a parent node and one or more child nodes
- Leaf Node
- A node that has no child nodes
The mainly uses of tree view control is to
display static/ dynamic menu in website. We can use database source in xml
format or database server object. Tree view Control has many more features i.e.
you can create child menu inside Parent Menu using database objects by finding
the node value. We can get the click event of node and set the node with
checkbox property.
As the name suggests Tree View it has the
property like Expand and Collapse. The Tree view has also property like ExpandDepth
this is actually how you want to display the tree view nodes as below:
You can use ShowCheckBoxes property to True if
you want yo display checkbox with Tree Nodes.
The ExpandDepth to display when the Tree View
is initially displayed. The default is -1, which displays all the nodes.
ExpandDepth = 0 - Expand one level node...
ExpandDepth = 1 - Expand two level nodes... And
so on.
<asp:TreeView ID="treeViewSiteMap" runat="server" ExpandDepth="1" ExpandImageUrl="~/Images/expand.png" CollapseImageUrl="~/Images/collapse.png" NodeStyle-VerticalPadding="2"
NodeStyle-HorizontalPadding="4" >
<Nodes>
<asp:TreeNode NavigateUrl="~/Home.aspx" Text="Home" ToolTip="Home">asp:TreeNode>
<asp:TreeNode NavigateUrl="~/About.aspx" Text="About Us" ToolTip="About Us">asp:TreeNode>
<asp:TreeNode NavigateUrl="~/Contact.aspx"
Text="Contact
Us" ToolTip="Contact
Us">asp:TreeNode>
<asp:TreeNode NavigateUrl="~/Product.aspx" Text="Product" ToolTip=" Product">
<asp:TreeNode NavigateUrl="~/Product1" Text="Product1" ToolTip=" Product1">asp:TreeNode>
<asp:TreeNode NavigateUrl="~/Product2" Text="Product2" ToolTip=" Product2">asp:TreeNode>
<asp:TreeNode NavigateUrl="~/Product3" Text="Product3" ToolTip=" Product3">asp:TreeNode>
asp:TreeNode>
Nodes>
asp:TreeView>
Comments