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.
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.
Note: you
can manually populate this control by,
- Clicking on TreeView control.
- Right click --> Edit Nodes
- Under 'Nodes' heading there are two buttons, to add Parent and child nodes respectively.
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();
}
Example 1
<asp:TreeView ID="TreeView3"
runat="server">
<Nodes>
<asp:TreeNode Text="My Computer">
<asp:TreeNode Text="Favorites">
<asp:TreeNode Text="News">
<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/>
<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Technology">
<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com"/>
<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net"/>
<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com"/>
<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Shopping">
<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com"/>
<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="City Links">
<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com"/>
<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Music Links">
<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
Example 2
<asp:TreeView ID="TreeView2"
RootNodeStyle-ImageUrl="~/images/xp/computer.gif"
ParentNodeStyle-ImageUrl="~/images/xp/folder.gif"
LeafNodeStyle-ImageUrl="~/images/xp/ie.png"
CollapseImageUrl="~/images/xp/minus.gif"
ExpandImageUrl="~/images/xp/plus.gif"
NoExpandImageUrl="~/images/xp/blank.gif"
runat="server">
<Nodes>
<asp:TreeNode Text="My Computer">
<asp:TreeNode Text="Favorites" ImageUrl="~/images/xp/star.gif">
<asp:TreeNode Text="News">
<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/>
<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Technology">
<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com"/>
<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net"/>
<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com"/>
<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Shopping">
<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com"/>
<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="City Links">
<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com"/>
<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Music Links">
<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
No comments:
Post a Comment