TreeView Control, asp:TreeView Control

The TreeView control is the most impressing new control in ASP.NET 2.0. It is used to display the hierarchical data in tree view format. It also supports dynamic population of the node on demand without page refresh.
When TreeView is displayed for the first time, it displays all its nodes. However, it can be controlled by setting ExpandDepth property.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <table, tr, td/> tag.

Following are some important properties that are very useful.

Properties of TreeView Control
DataSourceID	Indicates the data source to be used (You can use .sitemap file as datasource).
Text	Indicates the text to display in the node.
Tooltip	Indicates the tooltip of the node when you mouse over.
Value	Indicates the nondisplayed value (usually unique id to use in server side events)
NavigateUrl	Indicates the target location to send to the user when node is clicked. If not set you can handle TreeView.SelectedNodeChanged event to decide what to do.
Target	If NavigationUrl property is set, it indicates where to open the target location (in new window or same window).
ImageUrl	Indicates the image that appears next to the node.
ImageToolTip	Indicates the tooltip text to display for image next to the node.
Styles of TreeView Control
NodeSpacing	Space (in pixel) between current node and the node above or below it.
VerticalPadding	Space (in pixel) between the top and bottom of the node text.
HorizontalPadding	Space (in pixel) between the left and right of the node text.
ChildNodePadding	Space (in pixel) between the parent node and its child node.

DEMO : TreeView

Show Source Code

	Home

                    
// TreeView Control ////////////////////////////          
<asp:TreeView ID="TreeView1" runat="Server" DataSourceID="SiteMapDataSource1" ImageSet="Simple"
             ExpandDepth="1">
            <ParentNodeStyle Font-Bold="False" />
            <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
            <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
                VerticalPadding="0px" />
            <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="0px"
                NodeSpacing="0px" VerticalPadding="0px" />
        </asp:TreeView>


// SiteMapDataSource Control ////////////////////////////          
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="Server" />