Author:             Danish Hameed
Date:                15-July-2005
E-mail:             danish.hameed@hotmail.com
Position:          Software Enginner

Programming Language: Visual Studio 2005 Beta 2, C# (C-Sharp)

Author’s Introduction

Danish Hameed is a Bachelor’s of science in computer science. He has participated and scored remarkable positions in programming and software competitions. Currently working as Software Engineer in eLearning industry.

Binding Data With ‘TreeView’ Control Asp.net 2.0

 Over the period of few weeks I have been trying to play with asp.net 2.0 controls. As most of asp.net 2.0 beginners know there are almost no working examples and tutorials available for beta release and honestly I haven’t found people working on asp.net 2.0 so far as much as I expected.

Now the real thing started when I decided to pick up some pace and started using Microsoft visual studio 2005 asp.net 2.0 instead of VS’s prior version.Among so many new tools the one which I found really fascinating in asp.net 2.0 is TreeView control, the reason is; I have been creating TreeViews on JavaScript and had really tough time integrating them with server requests/responses.

Introduction of TreeView Control

A tree view control displays a hierarchical list of items using lines to connect related items in a hierarchy. Each item consists of a label and an optional bitmap. Windows Explorer uses a tree view control to display directories. It displays a tree structure, or menu, that users can traverse to get to different pages in your site. A node that contains child nodes can be expanded or collapsed by clicking on it.

You can use ASP.NET site Navigation features to provide a consistent way for users to navigate your site. A simple solution is to include hyperlinks that allow users to jump to other pages, presenting the hyperlinks in a list or a navigation menu. However, as your site grows, and as you move pages around in the site, it quickly becomes difficult to manage all of the links.

To create a consistent, easily managed navigation solution for your site, you can use ASP.NET site navigation TreeView control.

Fig: 1.0

Note: you can manually populate this control by, 1)     Clicking on TreeView control. 2)     Right click à Edit Nodes 3)     Under ‘Nodes’ heading there are two buttons, to add Parent and child nodes respectively.

Lets do some work now!

Now that we have pretty clear understanding of TreeView control, we will quickly move on and integrate this control with our site.

Step 1

Create two database tables ParentTable and ChildTable, having 2 columns each.

ParentTable   à [ParentName , ParentId (as PK)]
ChildTable      à [ChildName , ParentId (as FK)]

Note: you can use any database, in our example we will use Microsoft SQL server.

Fig. 2.0

Step 2

Now that we have created our tables, open Microsoft Visual Studio 2005 and create and Asp.net 2.0 WebForm. 

Note: You can do this by clicking File menu and then New web site. While creating the new page do not uncheck Place code in separate file checkbox.

Step 3

Add the following LOC (Line of code) at the start of your programs along with other using keywords.

 using System.Data.SqlClient;

Step 4

Place a TreeView control on your WebForm.

Note: Do not change its name, for simplicity we will use the default name TreeView1.

Now double click your page, point to Page_Load event and write fill_Tree();

protected void Page_Load(object sender, EventArgs e)     {         fill_Tree();     }

Do not worry, we will use this function in next step.

Step 5

Now the real thing starts. In this step we will populate our TreeView1 control using our two tables ParentTable and ChildTable.

Create a function fill_Tree()

void fill_Tree()     { /* * Fill the treeview control Root Nodes From Parent Table * and child nodes from ChildTables */  /* * Create an SQL Connection to connect to you our database */ SqlConnection SqlCon = new SqlConnection("server=D_hameed;uid=sa;pwd=airforce;database=test"); SqlCon.Open(); /* * Query the database */ SqlCommand SqlCmd = new SqlCommand("Select * from ParentTable",SqlCon); /* *Define and Populate the SQL DataReader */ SqlDataReader Sdr = SqlCmd.ExecuteReader(); /* * Dispose the SQL Command to release resources */ SqlCmd.Dispose (); /* * Initialize the string ParentNode. * We are going to populate this string array with our            ParentTable Records * and then we will use this string array to populate our TreeView1 Control with parent records */ string[,] ParentNode = new string[100, 2]; /* * Initialize an int variable from string array index */ int count = 0; /* * Now populate the string array using our SQL Datareader Sdr. * Please Correct Code Formatting if you are pasting this code in your application. */ while (Sdr.Read()) { ParentNode[count, 0] = Sdr.GetValue(Sdr.GetOrdinal("ParentID")).ToString(); ParentNode[count++, 1] = Sdr.GetValue(Sdr.GetOrdinal("ParentName")).ToString(); } /* * Close the SQL datareader to release resources */ Sdr.Close(); /* * Now once the array is filled with [Parentid,ParentName] * start a loop to find its child module. * We will use the same [count] variable to loop through ChildTable * to find out the number of child associated with ParentTable. */ for (int loop = 0; loop < count; loop++) { /* * First create a TreeView1 node with ParentName and than * add ChildName to that node */             TreeNode root = new TreeNode();             root.Text = ParentNode[loop, 1];             root.Target = "_blank"; /* * Give the url of your page */       root.NavigateUrl = "mypage.aspx"; /* * Now that we have [ParentId] in our array we can find out child modules * Please Correct Code Formatting if you are pasting this code in your application. */ SqlCommand Module_SqlCmd = new SqlCommand("Select * from ChildTable where ParentId =" + ParentNode[loop, 0], SqlCon); SqlDataReader Module_Sdr = Module_SqlCmd.ExecuteReader();             while (Module_Sdr.Read())             { // Add children module to the root node                 TreeNode child = new TreeNode();                 child.Text = Module_Sdr.GetValue(Module_Sdr.GetOrdinal("ChildName")).ToString();                 child.Target = "_blank";                 child.NavigateUrl = "your_page_Url.aspx";                 root.ChildNodes.Add(child);             }              Module_Sdr.Close();  // Add root node to TreeView            TreeView1.Nodes.Add(root);         } /* * By Default, when you populate TreeView Control programmatically, it expends all nodes. */             TreeView1.CollapseAll();    SqlCon.Close();     }

 Lets see how it looks like!

 Fig. 3.0

 

 You can spice it a bit by playing with [autoformat] and [show lines] property.

 I will be extremely honored to get feedback from you.

 By, Danish Hameed