How to use TreeView in

TreeView Server Control
TreeView is an web server control. treeview display hierarchical data such as a table of contents or file directory, in a tree structure. treeview control is made up of nodes. we can display static data in treeview by creating a collections of TreeNode elements as children of treeview.

we can bind treeview to a data sorce such as XmlDataSource and SiteMapDataSource. treeview can also be bound to an XmlDocument object or a DataSet object.

treeview node types are parent node, child node, leaf node and root node. parent node contains other node. child node is contained by another node and leaf node have no children node. root node is not contained by any other node.

node has two properties Text and Value. text property value display in the browser and the value property is hidden in browser and store any additional data about node. a node can have one mode selection mode or navigation mode. selection mode is default. NavigateUrl property used in navigation mode.

we can customize the treeview appearance. we can apply css or inline styles. treeview can be design by the following node styles HoverNodeStyle, LeafNodeStyle, NodeStyle, ParentNodeStyle, RootNodeStyle and SelectedNodeStyle. treeview also have basic design properties such as BackColor, ForeColor, BorderStyle, BorderColor, BorderWidth, Width, Height CssClass, EnableTheming, SkinID, ExpandDepth, ImageSet etc.

we can customize images that are displayed in treeview by using the following properties CollapseImageUrl, ExpandImageUrl, LineImagesFolder and NoExpandImageUrl.

treview control provide many events such as TreeNodeCheckChanged, SelectedNodeChanged, TreeNodeExpanded, TreeNodeCollapsed, TreeNodePopulate and TreeNodeDataBound.

when user click a node, it can either raise a selection event via postback. or it go to another page if NavigateUrl property is set. if NavigateUrl property is not set, then node clicking raise SelectedNodeChanged event.

the following example source codes describes you to learn more about treeview control.

<?xml version="1.0" encoding="utf-8" ?>
  <Item Name="Standard Toolbox Controls">
    <Option Control="AdRotator" />
    <Option Control="BulletedList" />
    <Option Control="CheckBox" />
    <Option Control="FileUpload" />
    <Option Control="MultiView" />
  <Item Name="Data Toolbox Controls">
    <Option Control="ListView" />
    <Option Control="GridView" />
    <Option Control="LinqDataSource" />
    <Option Control="XmlDataSource" />
  <Item Name="Validation Toolbox Controls">
    <Option Control="CompareValidator" />
    <Option Control="CustomValidator" />
  <Item Name="Navigation Toolbox Controls">
    <Option Control="Menu" />
    <Option Control="SiteMapPath" />
    <Option Control="TreeView" />
Now create a Web Form name TreeView.aspx. Then add an XmlDataSource Control and a TreeView Control. For XmlDataSource Control's DataFile uses the AspNetControls.xml file and for TreeView Control's DataSourceID uses the XmlDataSource Control's ID. Then uses the asp:TreeNodeBinding for bind Xml file's data. Here is the source code of TreeView.aspx file.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">


<html xmlns="">
<head runat="server">
    <title>How to use TreeView in</title>
<body style="padding:25px">
    <form id="form1" runat="server">
        <h2 style="color:MidnightBlue; font-style:italic;">      
            How to use TreeView
        <hr width="450" align="left" color="Gainsboro" />
                    Text="ASP.NET ToolBox"
More examples