Click here to Skip to main content
15,861,168 members
Articles / Web Development / ASP.NET
Article

Binding Data With ‘TreeView’ Control Asp.net 2.0

Rate me:
Please Sign up or sign in to vote.
4.33/5 (34 votes)
15 Jul 20055 min read 366.4K   2   66   55
This article deals with the integration of Asp.net 2.0 TreeView Control with database

Author:             Danish Hameed
Date:                15-July-2005
E-mail:             <st1:personname w:st="on">danish.hameed@hotmail.com
Position:          Software Enginner

Programming Language: Visual Studio 2005 Beta 2, C# (C-Sharp)<o:p>

Author’s Introduction<o:p>

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.<o:p>

Binding Data With ‘TreeView’ Control Asp.net 2.0<o:p>

<o:p> 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.<o:p>

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.<o:p>

Introduction of TreeView Control<o:p>

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.<o:p>

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.<o:p>

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

Fig: 1.0<o:p>

Image 1 <o:p>

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.<o:p>

Lets do some work now!<o:p>

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

Step 1<o:p>

Create two database tables ParentTable and ChildTable, having 2 columns each.<o:p>

ParentTable   à [ParentName , ParentId (as PK)]
ChildTable      à [ChildName , ParentId (as FK)]<o:p>

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

Fig. 2.0<o:p>

<o:p>Image 2

Step 2<o:p>

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

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.<o:p>

Step 3<o:p>

Add the following LOC (Line of code) at the start of your programs along with other using keywords.<o:p>

<o:p> using System.Data.SqlClient;<o:p>

Step 4<o:p>

Place a TreeView control on your WebForm.<o:p>

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

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

protected void Page_Load(object sender, EventArgs e)
    {
        fill_Tree();
    }<o:p>

Do not worry, we will use this function in next step.<o:p>

Step 5<o:p>

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()<o:p>

void fill_Tree()<o:p>

    {
/*
* Fill the treeview control Root Nodes From Parent Table
* and child nodes from ChildTables
*/<o:p> 

/*
* Create an SQL Connection to connect to you our database
*/<o:p>

SqlConnection SqlCon = new SqlConnection("server=D_hameed;uid=sa;pwd=airforce;database=test");<o:p>

SqlCon.Open();<o:p>

/*
* Query the database
*/<o:p>

SqlCommand SqlCmd = new SqlCommand("Select * from ParentTable",SqlCon);<o:p>

/*
*Define and Populate the SQL DataReader
*/<o:p>

SqlDataReader Sdr = SqlCmd.ExecuteReader();<o:p>

/*
* Dispose the SQL Command to release resources
*/<o:p>

SqlCmd.Dispose ();<o:p>

/*
* 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
*/<o:p>

string[,] ParentNode = new string[100, 2];<o:p>

/*
* Initialize an int variable from string array index
*/<o:p>

int count = 0;<o:p>

/*
* Now populate the string array using our SQL Datareader Sdr.

* Please Correct Code Formatting if you are pasting this code in your application.
*/<o:p>

while (Sdr.Read())
{

ParentNode[count, 0] = Sdr.GetValue(Sdr.GetOrdinal("ParentID")).ToString();
ParentNode[count++, 1] = Sdr.GetValue(Sdr.GetOrdinal("ParentName")).ToString();<o:p>

}<o:p>

/*
* Close the SQL datareader to release resources
*/<o:p>

Sdr.Close();<o:p>

/*
* 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.
*/<o:p>

for (int loop = 0; loop < count; loop++)<o:p>

{<o:p>

/*
* First create a TreeView1 node with ParentName and than
* add ChildName to that node
*/<o:p>

            TreeNode root = new TreeNode();
            root.Text = ParentNode[loop, 1];
            root.Target = "_blank";<o:p>

/*
* Give the url of your page
*/<o:p>

      root.NavigateUrl = "mypage.aspx";<o:p>

/*
* Now that we have [ParentId] in our array we can find out child modules<o:p>

* Please Correct Code Formatting if you are pasting this code in your application.<o:p>

*/<o:p>

SqlCommand Module_SqlCmd = new SqlCommand("Select * from ChildTable where ParentId =" + ParentNode[loop, 0], SqlCon);<o:p>

SqlDataReader Module_Sdr = Module_SqlCmd.ExecuteReader();<o:p>

            while (Module_Sdr.Read())
            {<o:p>

// Add children module to the root node<o:p>

                TreeNode child = new TreeNode();<o:p>

                child.Text = Module_Sdr.GetValue(Module_Sdr.GetOrdinal("ChildName")).ToString();<o:p>

                child.Target = "_blank";<o:p>

                child.NavigateUrl = "your_page_Url.aspx";<o:p>

                root.ChildNodes.Add(child);<o:p>

            }<o:p>

<o:p>             Module_Sdr.Close();<o:p>

<o:p> // Add root node to TreeView
           TreeView1.Nodes.Add(root);<o:p>

        }<o:p>

/*
* By Default, when you populate TreeView Control programmatically, it expends all nodes.
*/
            TreeView1.CollapseAll();
   SqlCon.Close();<o:p>

    }<o:p>

<o:p> Lets see how it looks like!<o:p>

<o:p> Fig. 3.0<o:p>

<o:p> Image 3

<o:p> You can spice it a bit by playing with [autoformat] and [show lines] property.<o:p>

<o:p> I will be extremely honored to get feedback from you.<o:p>

<o:p> By, Danish Hameed<o:p>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Pakistan Pakistan
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralDisplay items of list box in Tree view format Pin
Good Speed10-Mar-08 21:01
Good Speed10-Mar-08 21:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.