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>

Step1: click below link to view Category table and Subcategory table in sqlserver

Link to Category table and Subcategory table click here

Step2: Drag Menu control from toolbox

<asp:Menu ID=”Menu1″ runat=”server” Orientation=”Horizontal”>

</asp:Menu>

Step3: Write below code in Default.aspx.cs (Page Load event)

using System.Data;

using System.Data.SqlClient;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

string ConnectionString = “Data Source=192.168.1.23;Initial Catalog=Purchase;User id=sa;Password=abc”;

SqlConnection objConn = new SqlConnection(ConnectionString);

string query = “select CategoryID,CategoryName from tblCategory”;

SqlCommand objCmd = new SqlCommand(query, objConn);

DataSet objDs = new DataSet();

DataSet objDsChild = new DataSet();

SqlDataAdapter objDa = new SqlDataAdapter(objCmd);

objConn.Open();

objDa.Fill(objDs);

int count = objDs.Tables[0].Rows.Count – 1;

for (int i = 0; i < count; i++)

{

string catname = objDs.Tables[0].Rows[i]["CategoryName"].ToString();

int catID = int.Parse(objDs.Tables[0].Rows[i]["CategoryID"].ToString());

//Menu1.Items[i].Text = “dddd”;

MenuItem CatItem = new MenuItem();

CatItem.Text = catname;

CatItem.Value = catID.ToString();

CatItem.NavigateUrl = “http://msdn.microsoft.com/en-us/library/default.aspx”;

Menu1.Items.Add(CatItem);

//Remember below line this line of code will clear SubCategory previous data

//in loop

objDsChild.Clear();

//ChildItems i.e SubCategory items

string query2 = “select categoryID,SubCategoryID,SubCategory from tblSubCategory where CategoryID=” + catID;

SqlCommand objCmd2 = new SqlCommand(query2, objConn);

objCmd.Parameters.Add(”CategoryID”, SqlDbType.Int).Value = catID;

SqlDataAdapter objDaChild = new SqlDataAdapter(objCmd2);

objDaChild.Fill(objDsChild);

int ChildCount = objDsChild.Tables[0].Rows.Count – 1;

for (int j = 0; j <= ChildCount; j++)

{

//int catChildID = int.Parse(objDsChild.Tables[0].Rows[j]["CategoryID"].ToString());

//if (catID == catChildID)

//{

MenuItem SubcatItem = new MenuItem();

SubcatItem.Text = objDsChild.Tables[0].Rows[j]["SubCategory"].ToString();

SubcatItem.Value = objDsChild.Tables[0].Rows[j]["SubCategory"].ToString();

SubcatItem.NavigateUrl = “http://www.google.com”;

//Instead of passing NavigateUrl (http://www.google.com) add

//new column in Subcategory table

//column name Url

//subcatItem.NavigateUrl=objDsChild.Tables[0].Rows[j]["Url"].ToString();

CatItem.ChildItems.Add(SubcatItem);

//}

}

}

objConn.Close();

}

}

Step4: Adding Styles to Menu control

<asp:Menu ID=”Menu1″ runat=”server” Orientation=”Horizontal”>

<StaticMenuStyle BackColor=”#993300″ BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”2px” />

StaticMenuItemStyle BackColor=”#FFFF99″ Font-Names=”Verdana” Font-Size=”9pt” HorizontalPadding=”2px” ItemSpacing=”4px” VerticalPadding=”2px” />

<DynamicHoverStyle BackColor=”#FF9933″

Font-Names=”Tw Cen MT Condensed Extra Bold” ForeColor=”White” />

<DynamicMenuItemStyle BackColor=”#E8EFFF” ForeColor=”#663300″ />

<StaticHoverStyle BackColor=”#FF9933″ Font-Names=”Verdana” Font-Size=”9pt” ForeColor=”White” />

</asp:Menu>

Happy coding…