Treeview control is an asp.net web server control used to display hierarchical data tree structure. The treeview control is made up of Treenode objects.

• Treeview can add items static or dynamically using database
• It can add items at runtime and it can also delete items at runtime
• Node text that can be displayed as either selectable text or hyperlinks.
• It allows developer to create trees, populate nodes, set properties and so on

Treeview Node Types

Root: A node that has no parent node and one or more child nodes.

Parent: A node that has a parent node and one or more child nodes.

Leaf: A node that has no child nodes.

Each treeview node has Text and Value a Property. The Text Property displayed in the Treeview control(CategoryName). The value property is used to store additional data(CategoryID) this categoryID is used to display additional data or transfer to another webpage at postback events.

When a node of the TreeView control is clicked, it can either raise a selection event (via postback) or navigate to another page. When the NavigateUrl property is not set, clicking a node will raise a SelectedNodeChanged event that can be handled to provide custom functionality. Each node also has a SelectAction property that can be used to determine specific actions that happen when the node is clicked, such as expand or collapse the node. Instead of raising a selection event to navigate to a page when a node is clicked, set the NavigateUrl property of the node to a value other than an empty string (”").

Properties of Treeview control

Nodes: it use to add treeview root node items and child node items

RootNodeStyle: style applied to root node

<RootNodeStyle BackColor=”#C8C8C8″ ForeColor=”#993333″ />

RootNodeStyle applies to Treenode Books,Electronics and Furniture this all are root nodes.

NodeStyle : Default style applied to all nodes

<NodeStyle BackColor=”#33CC33″ Width=”100px” />

LeafNodeStyle: Style applied to leaf nodes (Child Nodes Asp.net ,CSharp in Books root node)

<LeafNodeStyle BackColor=”#FF9900″ Font-Names=”Verdana” Font-Size=”9pt”

ForeColor=”White” />

LeafNodeStyle applies to Asp.net and CSharp

HoverNodeStyle: Style that applies when the mouse hovers overs a node

<HoverNodeStyle BackColor=”#999999″ Font-Bold=”True” />

ShowExpandCollapse: Whether to show expand and collapse icons in a treeview control.

ShowExpandCollapse = True //show expand collapse

ShowExpandCollapse = false // Expand collapse will not work

ShowCheckBoxes: The node types next to which checkboxes should be shown

None, root, parent, leaf, all

Adding nodes to Treeview Control

Drag treeview control in toolbox – click (<) Treeview Tasks –Edit nodes… — Treenode editor displays – click Add root node icon – change Text property to Books – select Books then click Add a child node icon then add child nodes

<asp:TreeView ID=”TreeView1″ runat=”server”>

<Nodes>

<asp:TreeNode Text=”Books” Value=”Books”>

<asp:TreeNode Text=”Asp.net” Value=”Asp.net”></asp:TreeNode>

<asp:TreeNode Text=”CSharp” Value=”CSharp”></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text=”Electronics” Value=”Electronics”>

<asp:TreeNode Text=”LCDs” Value=”LCDs”></asp:TreeNode>

<asp:TreeNode Text=”Computers” Value=”Computers”></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text=”Furniture” Value=”Furniture”>

<asp:TreeNode Text=”Chairs” Value=”Chairs”></asp:TreeNode>

</asp:TreeNode>

</Nodes>

</asp:TreeView>