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
|
|
|
// 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" />
|