- Treeview Control
Microsoft's ASP.Net 2.0 introduces TreeView Control which can be used to consume information from hierarchical data sources like an XML file and then extract that information.
This section explains you that how to use the TreeView control with ASP.NET and how to decrease the server-side events on the client's browser to reduce the number of post-backs and improves the performance of the application. This article demonstrates that how to populate this control dynamically by adding nodes at runtime.
- TreeView Control Example
to be working with Treeview control,do the following steps :
- start -- > Programes --> Open Visual Studio
- create a new Web Application
- in .aspx file, includes Treeview control through ToolBox or includes <asp:TreeView ID="tr1" runat="server"></asp:TreeView>
- then it looks like below
-
-
-
Click on the small arrow located in the upper right-hand corner of the control, choose Auto Format, and select one of the styles,here choosen Contacts style, it looks like below:
-
-
- Populate Treeview from XML files
then, Retrives the datas from a xml file which looks below:
-
<?xml version="1.0" encoding="utf-8" ?>
<contacts>
<Contact Name="s.stanley">
<Description Value="Phone#, EMail Address, Web-Site">
</Description>
</Contact>
<Contact Name="a.naveed">
<Description Value="Phone#, EMail Address, Web-Site">
</Description>
</Contact>
<Contact Name="p.jhon">
<Description Value="Phone#, EMail Address, Web-Site">
</Description>
</Contact>
</contacts>
-
-
then,includes an XMLDataSource object to the form. Set its DataFile to the new XML file. Select the TreeViewControl, and set it's DataSourceID to the XMLDataSource object.Select the DataBindings property and open the TreeView DataBindings Editor.it look like below,
as shown in above fig,Its automatically loaded the nodes according to the xml file.Now you can specify the nodes from "available data bindings" to "selected data bindings".for instance, Select "Description" and click ADD. Set ValueField to Value. (Note: you can set value field and display field separately.
then Save and Run the application and make changes in xml data to ensure yourself.the output will be look like below:
-
- Populate Treeview from DataBase
here, we can dynamically populate the nodes in the TreeView from the database. the following example demonstrates this concept.
in .aspx file,
-
<asp:TreeView ID="tree1" runat="server" ShowExpandCollapse="true" ShowLines="true">
</asp:TreeView>
-
-
in .aspx.cs file, includes the required namespace belongs to the databases
-
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString);
string query = "select distinct(state) from TableStateCity";
SqlDataAdapter sda = new SqlDataAdapter(query, con);
DataTable dt = new DataTable();
sda.Fill(dt);
TreeNode node;
for (int i = 0; i < dt.Rows.Count; i++)
{
node = new TreeNode(dt.Rows[i]["state"].ToString());
node.SelectAction = TreeNodeSelectAction.SelectExpand;
tree1.Nodes.Add(node);
//TreeNode wel = new TreeNode(i.ToString());
//node.ChildNodes.Add(wel);
}
for (int j = 0; j < tree1.Nodes.Count; j++)
{
TreeNode man = tree1.Nodes[j];
string query1 = "select * from tablestatecity where state='"+man.Text+"'";
SqlDataAdapter sda1 = new SqlDataAdapter(query1, con);
DataTable dt1 = new DataTable();
sda1.Fill(dt1);
foreach(DataRow dr in dt1.Rows)
{
TreeNode node1 = new TreeNode(dr["city"].ToString());
node1.SelectAction = TreeNodeSelectAction.SelectExpand;
man.ChildNodes.Add(node1);
}
}
-
- Node Style Properties
- HoverNodeStyle -The style settings for a node when the mouse pointer is positioned over it.
- LeafNodeStyle -The style settings for the leaf nodes.
- NodeStyle -The default style settings for a node.
- ParentNodeStyle -The style settings for the parent nodes.
- RootNodeStyle -The style settings for the root node.
- SelectedNodeStyle -The style settings for a selected node.
- Image property
- CollapseImageUrl -The URL to an image displayed for the collapsible node indicator. This image is usually a minus sign (-).
- ExpandImageUrl -The URL to an image displayed for the expandable node indicator. This image is usually a plus sign (+).
- LineImagesFolder -The URL to the folder containing the line images used to connect parent nodes to child nodes. The ShowLines property must also be set to true for this property to have an effect.
- NoExpandImageUrl -The URL to an image displayed for the non-expandable node indicator.
- Common Events
- TreeNodeCheckChanged -Occurs when the check boxes of the TreeView control change state between posts to the server.
- SelectedNodeChanged -Occurs when a node is selected in the TreeView control.
- TreeNodeExpanded -Occurs when a node is expanded in the TreeView control.
- TreeNodeCollapsed -Occurs when a node is collapsed in the TreeView control.
- TreeNodePopulate -Occurs when a node with its PopulateOnDemand property set to true is expanded in the TreeView control.
- TreeNodeDataBound -Occurs when a data item is bound to a node in the TreeView control.
