Step1: Drag Treeview control from Navigation controls in Toolbox

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

</asp:TreeView>

Step2: Create Category table and SubCategory tables in sqlserver to display categories data and subcategories data in tree structure.

Click here to view Category and SubCategory tables

step3: write below function GetCategoriesAndSubcategories in default.aspx.cs and call that function in Treeview load event.

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

</asp:TreeView>

protected void TreeView1_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

GetCategoriesAndSubCategories();

}

}

public void GetCategoriesAndSubCategories()

{

string ConnectionString = “Data Source=192.168.1.23;Initial Catalog=Purchase;User;Password=xyz;”;

SqlConnection objConn = new SqlConnection(ConnectionString);

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

SqlCommand objCmd = new SqlCommand(query, objConn);

objCmd.CommandType = CommandType.Text;

//Dataset and sqldataAdapter for Categories

DataSet objDsCat = new DataSet();

SqlDataAdapter objDa = new SqlDataAdapter(objCmd);

objConn.Open();

objDa.Fill(objDsCat);

//Getting root nodes Categories

foreach (DataRow rowCat in objDsCat.Tables[0].Rows)

{

TreeNode nodeCat = new TreeNode();

nodeCat.Text = rowCat["CategoryName"].ToString();

nodeCat.Value = rowCat["CategoryID"].ToString();

TreeView1.Nodes.Add(nodeCat);

//Getting SubCategories values from Database using

//CategoryID above nodeCat.value

string querySubcat = “select SubCategoryID,SubCategory from tblSubcategory where CategoryID=” + nodeCat.Value;

SqlCommand objCmd2 = new SqlCommand(querySubcat, objConn);

//Dataset and sqldataAdapter for subcategories

DataSet objDsSubCat = new DataSet();

SqlDataAdapter objDaSubCat = new SqlDataAdapter(objCmd2);

objDaSubCat.Fill(objDsSubCat);

//Getting child nodes SubCategories

foreach (DataRow rowSubcat in objDsSubCat.Tables[0].Rows)

{

TreeNode nodeSubcat = new TreeNode();

nodeSubcat.Text = rowSubcat["SubCategory"].ToString();

nodeSubcat.Value = rowSubcat["SubCategoryID"].ToString();

nodeCat.ChildNodes.Add(nodeSubcat);

}

}

objConn.Close();

}

Getting Treeview Node Value and Text using Treeview SelectedNodeChanged

<asp:TreeView ID=”TreeView1″ runat=”server” onload=”TreeView1_Load”

onselectednodechanged=”TreeView1_SelectedNodeChanged”>

</asp:TreeView>

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)

{

//getting treeview node value

int categoryID = int.Parse(TreeView1.SelectedNode.Value);

//getting treeview node text

string category = TreeView1.SelectedNode.Text;

}

Happy coding…

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>