TreeView control in asp.net

Suggested Videos
Part 156 - Binding asp.net menu control to database table
Part 157 - SiteMapPath control in asp.net
Part 158 - Binding menu control to web.sitemap file



TreeView Web control is useful to display hierarchical data in a tree structure. The content for the TreeView control can be specified directly in the control or the TreeView control can be bound to 
1. XML file
2. web.sitemap file
3. Database table

A TreeView is a collection of TreeNode objects.



To get a TreeView control as shown in the image below,


we would configure the TreeView control as shown below. Notice that we have set Target attribute of TreeNode to _blank. This ensures that the target page is opened in a new window.
<asp:TreeView ID="TreeView1" runat="server">
    <Nodes> 
        <asp:TreeNode Text="Home" NavigateUrl="~/Home.aspx" Target="_blank" />
        <asp:TreeNode Text="Employee" NavigateUrl="~/Employee.aspx" Target="_blank">
            <asp:TreeNode Text="Upload Resume" NavigateUrl="~/UploadResume.aspx" Target="_blank"/>
            <asp:TreeNode Text="Edit Resume" NavigateUrl="~/EditResume.aspx" Target="_blank"/>
            <asp:TreeNode Text="View Resume" NavigateUrl="~/ViewResume.aspx" Target="_blank"/>
        </asp:TreeNode>
        <asp:TreeNode Text="Employer" NavigateUrl="~/Employer.aspx" Target="_blank">
            <asp:TreeNode Text="Upload Job" NavigateUrl="~/UploadJob.aspx" Target="_blank"/>
            <asp:TreeNode Text="Edit Job" NavigateUrl="~/EditJob.aspx" Target="_blank"/>
            <asp:TreeNode Text="View Job" NavigateUrl="~/ViewJob.aspx" Target="_blank"/>
        </asp:TreeNode>
        <asp:TreeNode Text="Admin" NavigateUrl="~/Admin.aspx" Target="_blank">
            <asp:TreeNode Text="Add User" NavigateUrl="~/AddUser.aspx" Target="_blank"/>
            <asp:TreeNode Text="Edit User" NavigateUrl="~/EditUser.aspx" Target="_blank"/>
            <asp:TreeNode Text="View User" NavigateUrl="~/ViewUser.aspx" Target="_blank"/>
        </asp:TreeNode>
    </Nodes>
</asp:TreeView>

To configure the look and feel of the TreeView control, the following styles can be used.
1. HoverNodeStyle
2. LeafNodeStyle
3. RootNodeStyle
4. SelectedNodeStyle etc.

No comments