ASP.Net/Asp Control/TreeView
Содержание
- 1 A basic TreeView control
- 2 Add check boxes to leaf nodes (C#)
- 3 Add check boxes to leaf nodes (VB)
- 4 Adding nodes programmatically to the TreeView control (C#)
- 5 Adding nodes programmatically to the TreeView control (VB)
- 6 Applying custom images to the TreeView control
- 7 Applying styles to different TreeView node levels.
- 8 A TreeView control with the MSDN style applied to it
- 9 Binding a TreeView control to the Data.xml file
- 10 Custom TreeView Control
- 11 Database tree
- 12 Database TreeView
- 12.1 Tree Filled From Database
- 12.2 DirectoryInfo TreeView
- 12.3 Displaying database data with a TreeView control.
- 12.4 Dynamic tree view
- 12.5 Expanding and collapsing the nodes of the TreeView control programmatically (C#)
- 12.6 Expanding and collapsing the nodes of the TreeView control programmatically (VB)
- 12.7 Expanding nodes programmatically using the Expanded property
- 12.8 Expanding specific nodes programmatically
- 12.9 Formatting the TreeView Control
- 12.10 ParentNodeStyle in a TreeView
- 12.11 Test TreeView
- 12.12 TreeView DataBindings
- 12.13 TreeView Populate On Demand
- 12.14 Product Nodes Filled On Demand
- 12.15 Using Populate On Demand and AJAX
- 12.16 Using Styles with the TreeView control.
A basic TreeView control
<source lang="csharp">
<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Using the TreeView Server Control</title>
</head> <body>
<form id="form1" runat="server">
<asp:SiteMapPath ID="SiteMapPath1" Runat="server">
</asp:SiteMapPath>
<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="SiteMapDataSource1"> </asp:TreeView> <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
</form>
</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
</source>
Add check boxes to leaf nodes (C#)
<source lang="csharp">
<%@ Page Language="C#" %> <script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
if (TreeView1.CheckedNodes.Count > 0)
{
Label1.Text = "We are sending you information on:";
foreach (TreeNode node in TreeView1.CheckedNodes)
{
Label1.Text += node.Text + " " + node.Parent.Text + "
";
}
}
else
{
Label1.Text = "You didn"t select anything. Sorry!";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Latest Hardware</title>
</head>
<body>
<form id="Form1" runat="server">
Please select the items you are interested in:
<p>
<asp:TreeView ID="TreeView1"
Runat="server"
Font-Underline="False"
DataSourceID="XmlDataSource1"
ShowCheckBoxes="Leaf">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware"
Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
<p>
<asp:Button ID="Button1"
Runat="server"
Text="Submit Choices"
OnClick="Button1_Click" />
<asp:XmlDataSource ID="XmlDataSource1"
Runat="server"
DataFile="Data.xml">
</asp:XmlDataSource>
</p>
<asp:Label ID="Label1" Runat="Server" />
</form>
</body> </html> File: Data.xml <?xml version="1.0" encoding="utf-8"?> <Hardware>
<Item Category="A"> <Option Choice="A1" /> <Option Choice="A2" /> </Item> <Item Category="B"> <Option Choice="B1" /> <Option Choice="B2" /> <Option Choice="B3" /> </Item>
</Hardware>
</source>
Add check boxes to leaf nodes (VB)
<source lang="csharp">
<%@ Page Language="VB" %> <script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
If TreeView1.CheckedNodes.Count > 0 Then
For Each node As TreeNode In TreeView1.CheckedNodes
Label1.Text += node.Text & " " & node.Parent.Text & "
"
Next
Else
Label1.Text = "You didn"t select anything. Sorry!"
End If
End Sub
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Latest Hardware</title>
</head> <body>
<form id="Form1" runat="server">
<asp:TreeView ID="Treeview1" Runat="server" Font-Underline="False"
DataSourceID="XmlDataSource1" ShowCheckBoxes="Leaf">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware"
Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
<asp:Button ID="Button1" Runat="server" Text="Submit Choices" OnClick="Button1_Click" />
<asp:XmlDataSource ID="XmlDataSource1" Runat="server"
DataFile="Data.xml">
</asp:XmlDataSource>
</p>
<asp:Label ID="Label1" Runat="Server" />
</form>
</body> </html> File: Data.xml <?xml version="1.0" encoding="utf-8"?> <Hardware>
<Item Category="A"> <Option Choice="A1" /> <Option Choice="A2" /> </Item> <Item Category="B"> <Option Choice="B1" /> <Option Choice="B2" /> <Option Choice="B3" /> </Item>
</Hardware>
</source>
Adding nodes programmatically to the TreeView control (C#)
<source lang="csharp">
<%@ Page Language="C#" %> <script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
TreeView1.ExpandAll();
}
protected void Button2_Click(object sender, System.EventArgs e)
{
TreeView1.CollapseAll();
}
protected void Button3_Click(object sender, System.EventArgs e)
{
TreeNode myNode = new TreeNode();
myNode.Text = TextBox1.Text;
myNode.NavigateUrl = TextBox2.Text;
TreeView1.FindNode("Home/Finance/Markets").ChildNodes.Add(myNode);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView Control</title>
</head> <body>
<form id="Form1" runat="server">
<asp:Button ID="Button1"
Runat="server"
Text="Expand Nodes"
OnClick="Button1_Click" />
<asp:Button ID="Button2"
Runat="server"
Text="Collapse Nodes"
OnClick="Button2_Click" /></p>
Text of new node:
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
Desination URL of new node:
<asp:TextBox ID="TextBox2" Runat="server">
</asp:TextBox>
<asp:Button ID="Button3" Runat="server" Text="Add New Node"
OnClick="Button3_Click" />
<asp:TreeView ID="TreeView1" runat="server"
DataSourceId="SiteMapDataSource1">
</asp:TreeView></p>
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" /></p>
</form>
</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
</source>
Adding nodes programmatically to the TreeView control (VB)
<source lang="csharp">
<%@ Page Language="VB" %> <script runat="server" language="vb">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TreeView1.ExpandAll()
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TreeView1.CollapseAll()
End Sub
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim myNode As New TreeNode
myNode.Text = TextBox1.Text
myNode.NavigateUrl = TextBox2.Text
TreeView1.FindNode("Home/Finance/Markets").ChildNodes.Add(myNode)
End Sub
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView Control</title>
</head> <body>
<form id="Form1" runat="server">
<asp:Button ID="Button1"
Runat="server"
Text="Expand Nodes"
OnClick="Button1_Click" />
<asp:Button ID="Button2"
Runat="server"
Text="Collapse Nodes"
OnClick="Button2_Click" /></p>
Text of new node:
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
Desination URL of new node:
<asp:TextBox ID="TextBox2" Runat="server">
</asp:TextBox>
<asp:Button ID="Button3"
Runat="server"
Text="Add New Node"
OnClick="Button3_Click" />
<asp:TreeView ID="TreeView1"
runat="server"
DataSourceId="SiteMapDataSource1">
</asp:TreeView></p>
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" /></p>
</form>
</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
</source>
Applying custom images to the TreeView control
<source lang="csharp">
<asp:TreeViewTreeView
ID="TreeView1"
Runat="server"
Font-Underline="False"
DataSourceId="XmlDataSource1"
CollapseImageUrl="Images/CollapseImage.gif"
ExpandImageUrl="Images/ExpandImage.gif"
LeafImageUrl="Images/LeafImage.gif">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
</source>
Applying styles to different TreeView node levels.
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<style type="text/css">
.nodeLevel1
{
font:40px Arial,Sans-Serif;
}
.nodeLevel2
{
font:20px Arial,Sans-Serif;
}
.nodeLevel3
{
font:10px Arial,Sans-Serif;
}
</style>
<title>TreeView Level Styles</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView
id="TreeView1"
Runat="server">
<LevelStyles>
<asp:TreeNodeStyle CssClass="nodeLevel1" />
<asp:TreeNodeStyle CssClass="nodeLevel2" />
<asp:TreeNodeStyle CssClass="nodeLevel3" />
</LevelStyles>
<Nodes>
<asp:TreeNode
Text="Home">
<asp:TreeNode Text="Products">
<asp:TreeNode Text="First Product" />
<asp:TreeNode Text="Second Product" />
</asp:TreeNode>
<asp:TreeNode Text="Services">
<asp:TreeNode Text="First Service" />
<asp:TreeNode Text="Second Service" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body> </html>
</source>
A TreeView control with the MSDN style applied to it
<source lang="csharp">
<asp:TreeView ID="TreeView1"
Runat="server"
DataSourceID="SiteMapDataSource1"
ImageSet="Msdn"
NodeIndent="10">
<SelectedNodeStyle BackColor="White"
VerticalPadding="1"
BorderColor="#888888"
BorderStyle="Solid"
BorderWidth="1px"
HorizontalPadding="3"></SelectedNodeStyle>
<NodeStyle VerticalPadding="2"
Font-Names="Verdana"
Font-Size="8pt"
NodeSpacing="1"
HorizontalPadding="5"
ForeColor="Black"></NodeStyle>
<HoverNodeStyle BackColor="#CCCCCC"
BorderColor="#888888"
BorderStyle="Solid"
BorderWidth="1px"
Font-Underline="True"></HoverNodeStyle>
</asp:TreeView>
</source>
Binding a TreeView control to the Data.xml file
<source lang="csharp">
<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Latest Hardware</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView ID="Treeview1" Runat="server" DataSourceID="Xmldatasource1">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware"
Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
<asp:XmlDataSource ID="Xmldatasource1" Runat="server"
DataFile="Data.xml">
</asp:XmlDataSource>
</form>
</body> </html> File: Data.xml <?xml version="1.0" encoding="utf-8"?> <Hardware>
<Item Category="A"> <Option Choice="A1" /> <Option Choice="A2" /> </Item> <Item Category="B"> <Option Choice="B1" /> <Option Choice="B2" /> <Option Choice="B3" /> </Item>
</Hardware>
</source>
Custom TreeView Control
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Custom TreeView</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView ID="treeMain"
runat="server"
DataSourceID="siteSource"
CssClass="tree"
ImageSet="Custom"
NodeIndent="15"
CollapseImageUrl="images/iconCollapse.gif"
ExpandImageUrl="images/iconExpand.gif"
NoExpandImageUrl="images/iconPage.gif"
ShowLines="True" >
<NodeStyle NodeSpacing="2px"
ChildNodesPadding="6px"
HorizontalPadding="4px" />
<RootNodeStyle HorizontalPadding="15px"
VerticalPadding="5px"
BorderStyle="Solid"
BorderWidth="1px"
BorderColor="#ACB9B9"/>
</asp:TreeView>
<asp:SiteMapDataSource ID="siteSource"
runat="server"
ShowStartingNode="true" />
</form>
</body> </html>
</source>
Database tree
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="DataBaseTree" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Custom TreeView</title>
</head> <body>
<form id="form1" runat="server">
Database TreeView
This example fills a TreeView control from a database
Tree Filled From Database
<asp:TreeView ID="treeMain"
runat="server"
CssClass="tree"
ShowCheckBoxes="Leaf">
</asp:TreeView>
</form>
</body> </html> File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class DataBaseTree : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string[] groups = ProductCatalog.GetGroups();
foreach (string grp in groups)
{
TreeNode groupNode = new TreeNode(grp);
string[] subheadings = ProductCatalog.GetSubHeadingsByGroup(grp);
foreach (string sub in subheadings)
{
TreeNode subheadingNode = new TreeNode(sub);
string[] products = ProductCatalog.GetProductsBySubHeading(sub);
foreach (string prod in products)
{
TreeNode productNode = new TreeNode(prod);
subheadingNode.ChildNodes.Add(productNode);
}
groupNode.ChildNodes.Add(subheadingNode);
}
treeMain.Nodes.Add(groupNode);
}
}
}
}
class ProductCatalog {
private static Product[] _products = {
new Product(1, "A", "7", 39.99),
new Product(2, "B", "8", 49.99),
new Product(3, "C", "7", 39.99),
new Product(4, "D", "8", 49.99),
new Product(5, "E", "7", 39.99),
new Product(6, "F", "8", 49.99),
new Product(7, "G", "7", 39.99),
new Product(8, "H", "8", 49.99),
new Product(9, "I", "7", 39.99),
new Product(10, "J", "8", 49.99),
new Product(11, "K", "7", 39.99),
new Product(12, "L", "8", 49.99),
};
private static string[] _groups = { "Categories", "Series" };
private static string[] _subheadings1 = { "Graphics", "Internet", };
private static string[] _subheadings2 = { "Core Series", ".NET Series" };
private static string[] _books1 = { "GDI" };
private static string[] _books2 = { "HTML", "CSS", "Javascript", "Web Services" };
private static string[] _books3 = { "Java", "C#", "CSS" };
private static string[] _books4 = { "C++", "Web Services" };
private static Product[] _prods1 = { _products[0] };
private static Product[] _prods2 = { _products[5], _products[6], _products[7], _products[3] };
private static Product[] _prods3 = { _products[0], _products[1], _products[7] };
private static Product[] _prods4 = { _products[2], _products[3] };
public static Product[] GetProducts()
{
return _products;
}
public static Product GetProductById(int id)
{
foreach (Product prod in _products)
{
if (prod.Id == id)
return prod;
}
return null;
}
public static string[] GetGroups()
{
return _groups;
}
public static string[] GetSubHeadingsByGroup(string group)
{
if (group == "Categories")
return _subheadings1;
else
return _subheadings2;
}
public static string[] GetProductsBySubHeading(string subheading)
{
if (subheading == "Graphics")
return _books1;
else if (subheading == "Internet")
return _books2;
else if (subheading == "Core Series")
return _books3;
else
return _books4;
}
public static Product[] GetProductObjectsBySubHeading(string subheading)
{
if (subheading == "Graphics")
return _prods1;
else if (subheading == "Internet")
return _prods2;
else if (subheading == "Core Series")
return _prods3;
else
return _prods4;
}
} class Product {
public int Id; public string Name; public string Isbn; public double Price;
public Product(int id, string name, string isbn)
{
Id = id;
Name = name;
Isbn = isbn;
Price = 0.0;
}
public Product(int id, string name, string isbn, double price)
{
Id = id;
Name = name;
Isbn = isbn;
Price = price;
}
}
</source>
DirectoryInfo TreeView
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Chapter_VII_DirectoryTreeView" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Directory Tree View</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1"
runat="server"
SelectedNodeStyle-ForeColor="Green"
SelectedNodeStyle-VerticalPadding="0"
ShowCheckBoxes="Leaf"
BackColor="White"
Font-Size="Medium"
ForeColor="Blue"></asp:TreeView>
</form>
</body> </html> File: Default.aspx.cs using System; using System.IO; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Chapter_VII_DirectoryTreeView : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
String directoryPath = "C:\\";
DirectoryInfo directoryInfo = new System.IO.DirectoryInfo(directoryPath);
if (directoryInfo != null)
{
TreeNode rootDirectoryNode = CreateDirectoryTreeView(directoryInfo, null);
if (rootDirectoryNode != null)
TreeView1.Nodes.Add(rootDirectoryNode);
}
}
}
TreeNode CreateDirectoryTreeView(DirectoryInfo directoryInfo, TreeNode parentNode)
{
TreeNode baseNode = new TreeNode(directoryInfo.Name);
DirectoryInfo[] subDirectories = directoryInfo.GetDirectories();
FileInfo[] filesInDirectory = directoryInfo.GetFiles();
for (int i = 0, n = subDirectories.Length; i < n; i++)
CreateDirectoryTreeView(subDirectories[i], baseNode);
for (int ctr = 0, cnt = filesInDirectory.Length; ctr < cnt; ctr++)
{
TreeNode childNode = new TreeNode(filesInDirectory[ctr].Name);
baseNode.ChildNodes.Add(childNode);
}
if (parentNode == null)
return baseNode;
parentNode.ChildNodes.Add(baseNode);
return parentNode;
}
}
</source>
Displaying database data with a TreeView control.
<source lang="csharp">
<%@ Page Language="C#" %> <%@ Import Namespace="System.Web.Configuration" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><script runat="server">
void Page_Load()
{
if (!Page.IsPostBack)
PopulateTreeView();
}
private void PopulateTreeView()
{
DataTable treeViewData = GetTreeViewData();
AddTopTreeViewNodes(treeViewData);
}
private DataTable GetTreeViewData()
{
string selectCommand = "SELECT MessageId,ParentId,Subject FROM Discuss";
string conString = WebConfigurationManager.ConnectionStrings["Discuss"]. ConnectionString;
SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);
DataTable dtblDiscuss = new DataTable();
dad.Fill(dtblDiscuss);
return dtblDiscuss;
}
private void AddTopTreeViewNodes(DataTable treeViewData)
{
DataView view = new DataView(treeViewData);
view.RowFilter = "ParentID IS NULL";
foreach (DataRowView row in view) {
TreeNode newNode = new TreeNode(row["Subject"].ToString(), row["MessageId"].ToString());
TreeView1.Nodes.Add(newNode);
AddChildTreeViewNodes(treeViewData, newNode);
}
}
private void AddChildTreeViewNodes(DataTable treeViewData, TreeNode parentTreeViewNode)
{
DataView view = new DataView(treeViewData);
view.RowFilter = "ParentID=" + parentTreeViewNode.Value;
foreach (DataRowView row in view)
{
TreeNode newNode = new TreeNode(row["Subject"].ToString(), row["MessageId"].ToString());
parentTreeViewNode.ChildNodes.Add(newNode);
AddChildTreeViewNodes(treeViewData, newNode);
}
}
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<style type="text/css"> </style> <title>TreeView Database</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView
id="TreeView1"
Runat="server" />
</form>
</body> </html>
</source>
Dynamic tree view
<source lang="csharp">
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default_aspx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True" LineImagesFolder="~/TreeLineImages"/>
<asp:TreeView ID="TreeView2" runat="server">
<Nodes>
<asp:TreeNode SelectAction="Expand" Value="Windows" Text="Windows">
<asp:TreeNode SelectAction="SelectExpand" Value="Windows XP" Text="Windows XP">
<asp:TreeNode ShowCheckBox="True" Value="Home Edition" Checked="True" NavigateUrl="xphome.aspx"
Text="Home Edition"></asp:TreeNode>
<asp:TreeNode ShowCheckBox="True" Value="Professional" NavigateUrl="xpProfessional.aspx"
Text="Professional"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Target="df" Value="Windows 2003 Server" NavigateUrl="win2003.aspx"
Text="Windows Server 2003"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body> </html> File: Default.aspx.vb Imports System.IO Partial Class Default_aspx
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Me.Load
If TreeView2.SelectedNode IsNot Nothing Then
Response.Write(TreeView2.SelectedNode.Text)
MsgBox(TreeView2.SelectedNode.Text)
End If
If Not IsPostBack Then
TreeView1.Nodes.Add(New _
TreeNode(Request.PhysicalApplicationPath))
getSubDirectories(Request.PhysicalApplicationPath, _
TreeView1.Nodes(0))
End If
End Sub
Public Sub getSubDirectories(ByVal path As String, _
ByVal node As TreeNode)
Dim dirs As String() = Directory.GetDirectories(path)
If dirs.Length = 0 Then
Exit Sub
Else
Dim dir As String
For Each dir In dirs
Dim newNode As New TreeNode(dir.Substring(dir.LastIndexOf("\") + 1))
newNode.ToolTip = dir
node.ChildNodes.Add(newNode)
getSubDirectories(dir, newNode)
getFiles(dir, newNode)
newNode.CollapseAll()
Next
End If
End Sub
Public Sub getFiles(ByVal path As String, ByVal node As TreeNode)
Dim files As String() = Directory.GetFiles(path)
Dim file As String
If files.Length = 0 And node.ChildNodes.Count = 0 Then
Dim newNode As New TreeNode("Directory is empty")
node.ChildNodes.Add(newNode)
Exit Sub
End If
For Each file In files
Dim newNode As New TreeNode(file.Substring(path.Length + 1))
newNode.ToolTip = file
newNode.ImageUrl = "Images\file.gif"
node.ChildNodes.Add(newNode)
Next
End Sub
End Class
</source>
Expanding and collapsing the nodes of the TreeView control programmatically (C#)
<source lang="csharp">
<%@ Page Language="C#" %> <script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
TreeView1.ExpandAll();
}
protected void Button2_Click(object sender, System.EventArgs e)
{
TreeView1.CollapseAll();
}
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView Control</title>
</head> <body>
<form id="Form1" runat="server">
<asp:Button ID="Button1" Runat="server" Text="Expand Nodes"
OnClick="Button1_Click" />
<asp:Button ID="Button2" Runat="server" Text="Collapse Nodes"
OnClick="Button2_Click" />
<asp:TreeView ID="TreeView1" Runat="server"
DataSourceId="SiteMapDataSource1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
</form>
</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
</source>
Expanding and collapsing the nodes of the TreeView control programmatically (VB)
<source lang="csharp">
<%@ Page Language="VB" %> <script runat="server" language="vb">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TreeView1.ExpandAll()
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TreeView1.CollapseAll()
End Sub
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView Control</title>
</head> <body>
<form id="Form1" runat="server">
<asp:Button ID="Button1" Runat="server" Text="Expand Nodes"
OnClick="Button1_Click" />
<asp:Button ID="Button2" Runat="server" Text="Collapse Nodes"
OnClick="Button2_Click" />
<asp:TreeView ID="TreeView1" Runat="server"
DataSourceId="SiteMapDataSource1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
</form>
</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
</source>
Expanding nodes programmatically using the Expanded property
<source lang="csharp">
protected void TreeView1_DataBound(object sender, System.EventArgs e) {
TreeView1.FindNode("Home").Expanded = true;
TreeView1.FindNode("Home//Finance").Expanded = true;
TreeView1.FindNode("Home//Finance//Markets").Expanded = true;
}
</source>
Expanding specific nodes programmatically
<source lang="csharp">
protected void TreeView1_DataBound(object sender, System.EventArgs e) {
TreeView1.FindNode("Home").Expand();
TreeView1.FindNode("Home\\Finance").Expand();
TreeView1.FindNode("Home\\Finance\\Markets").Expand();
}
</source>
Formatting the TreeView Control
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView ImageSet</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView
id="TreeView1"
ImageSet="XPFileExplorer"
ShowLines="true"
Runat="server">
<Nodes>
<asp:TreeNode
Text="Home">
<asp:TreeNode Text="Products">
<asp:TreeNode Text="First Product" />
<asp:TreeNode Text="Second Product" />
</asp:TreeNode>
<asp:TreeNode Text="Services">
<asp:TreeNode Text="First Service" />
<asp:TreeNode Text="Second Service" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body> </html>
</source>
ParentNodeStyle in a TreeView
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1"
runat="server"
DataSourceID="XmlDataSource1"
SelectedNodeStyle-ForeColor="Green"
SelectedNodeStyle-VerticalPadding="0"
ShowCheckBoxes="Parent"
ForeColor="Black">
<ParentNodeStyle Font-Bold="True"
ForeColor="Black"
BackColor="SkyBlue" />
<SelectedNodeStyle Font-Underline="True"
HorizontalPadding="0px"
VerticalPadding="0px"
BackColor="#C04000" />
<NodeStyle Font-Names="Verdana"
HorizontalPadding="5px"
NodeSpacing="0px"
VerticalPadding="0px"/>
<DataBindings>
<asp:TreeNodeBinding DataMember="Address" ValueField="Value" />
<asp:TreeNodeBinding DataMember="Employee" ValueField="Name" />
</DataBindings>
<LeafNodeStyle BackColor="#FFE0C0" />
</asp:TreeView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Data.xml">
</asp:XmlDataSource>
</form>
</body> </html> File: Data.xml <?xml version="1.0" encoding="utf-8" ?> <Employee_Addresses>
<Employee Name="A"> <Address Value="USA"> </Address> </Employee> <Employee Name="B"> <Address Value="USA"> </Address> </Employee>
</Employee_Addresses>
</source>
Test TreeView
<source lang="csharp">
<%@ Page Language="C#"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Test TreeView</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView ID="treeMain"
runat="server"
DataSourceID="siteSource"
ImageSet="Custom"
NodeIndent="15"
CollapseImageUrl="images/iconCollapse.gif"
ExpandImageUrl="images/iconExpand.gif"
NoExpandImageUrl="images/iconPage.gif" >
<NodeStyle NodeSpacing="2" ChildNodesPadding="6"
HorizontalPadding="4" />
<RootNodeStyle HorizontalPadding="15" VerticalPadding="5"
BorderStyle="Solid" BorderWidth="1" BorderColor="#ACB9B9"/>
</asp:TreeView>
<asp:SiteMapDataSource ID="siteSource" runat="server"
ShowStartingNode="true" />
</form>
</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode url="BookHome.aspx" title="Home"
description="Return to home page">
<siteMapNode url="Catalog.aspx" title="Catalog" >
<siteMapNode url="Categories.aspx" title="Categories" >
<siteMapNode url="List.aspx?cat=1" title="Graphics" />
<siteMapNode url="List.aspx?cat=2" title="Internet" />
<siteMapNode url="List.aspx?cat=3" title="Networking" />
</siteMapNode>
<siteMapNode url="Series.aspx" title="Series" >
<siteMapNode url="List.aspx?series=1" title="Core Series" />
<siteMapNode url="List.aspx?series=2" title=".NET Series" />
<siteMapNode url="List.aspx?series=3" title="Signature Series"/>
</siteMapNode>
</siteMapNode>
<siteMapNode url="Search.aspx" title="Search" />
<siteMapNode url="Help.aspx" title="Help" >
<siteMapNode url="About.aspx" title="About Us" />
<siteMapNode url="Contact.aspx" title="Contact Us" />
</siteMapNode>
</siteMapNode>
</siteMap>
</source>
TreeView DataBindings
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>TreeView DataBindings</title> </head> <body>
<form id="form1" runat="server">
<asp:TreeView ID="treeMain"
runat="server"
CssClass="tree"
DataSourceID="xmlSource"
ShowCheckBoxes="Leaf"
MaxDataBindDepth="1"
NodeIndent="18">
<DataBindings>
<asp:TreeNodeBinding DataMember="Category" TextField="Name" ImageUrlField="Icon" />
<asp:TreeNodeBinding DataMember="Book" TextField="Title" />
</DataBindings>
<RootNodeStyle HorizontalPadding="4" />
</asp:TreeView>
<asp:XmlDataSource id="xmlSource"
runat="server"
DataFile="Data.xml" XPath="/Books/Category"/>
</form>
</body> </html> File: Data.xml <?xml version="1.0" encoding="utf-8" ?> <Books>
<Category Name="Internet" Icon="images/small_iconInternet.gif">
<Book Title="E-Business">
<Url>browse.aspx?cat=101</Url>
</Book>
<Book Title="Servers">
<Url>browse.aspx?cat=102</Url>
</Book>
<Book Title="Usability">
<Url>browse.aspx?cat=103</Url>
</Book>
</Category>
<Category Name="Networking" Icon="images/small_iconNetworking.gif">
<Book Title="Protocols">
<Url>browse.aspx?cat=201</Url>
</Book>
<Book Title="Security">
<Url>browse.aspx?cat=202</Url>
</Book>
</Category>
</Books>
</source>
TreeView Populate On Demand
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="PopulateOnDemand" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView Populate On Demand</title>
<style type="text/css">
h2 { background-color: #A6B4DB; width: 300px; padding: 4px; border: solid 1pt #A6B4DB;}
.tree { width: 300px; padding: 4px; border: solid 1pt #A6B4DB;}
</style>
</head> <body>
<form id="form1" runat="server">
Product Nodes Filled On Demand
<asp:TreeView ID="treeMain"
runat="server"
CssClass="tree"
OnTreeNodePopulate="treeMain_TreeNodePopulate"
ExpandDepth="1"
EnableClientScript="true"
PopulateNodesFromClient="true">
</asp:TreeView>
</form>
</body> </html> File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class PopulateOnDemand : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string[] groups = ProductCatalog.GetGroups();
foreach (string grp in groups)
{
TreeNode groupNode = new TreeNode(grp);
string[] subheadings = ProductCatalog.GetSubHeadingsByGroup(grp);
foreach (string sub in subheadings)
{
TreeNode subheadingNode = new TreeNode(sub);
subheadingNode.PopulateOnDemand = true;
groupNode.ChildNodes.Add(subheadingNode);
}
treeMain.Nodes.Add(groupNode);
}
}
}
protected void treeMain_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
TreeNode subHeadingNode = e.Node;
string sub = subHeadingNode.Value;
string[] products = ProductCatalog.GetProductsBySubHeading(sub);
foreach (string prod in products)
{
TreeNode productNode = new TreeNode(prod);
subHeadingNode.ChildNodes.Add(productNode);
}
}
}
class ProductCatalog {
private static Product[] _products = {
new Product(1, "A", "7", 39.99),
new Product(2, "B", "8", 49.99),
new Product(3, "C", "7", 39.99),
new Product(4, "D", "8", 49.99),
new Product(5, "E", "7", 39.99),
new Product(6, "F", "8", 49.99),
new Product(7, "G", "7", 39.99),
new Product(8, "H", "8", 49.99),
new Product(9, "I", "7", 39.99),
new Product(10, "J", "8", 49.99),
new Product(11, "K", "7", 39.99),
new Product(12, "L", "8", 49.99),
};
private static string[] _groups = { "Categories", "Series" };
private static string[] _subheadings1 = { "Graphics", "Internet", };
private static string[] _subheadings2 = { "Core Series", ".NET Series" };
private static string[] _books1 = { "GDI" };
private static string[] _books2 = { "HTML", "CSS", "Javascript", "Web Services" };
private static string[] _books3 = { "Java", "C#", "CSS" };
private static string[] _books4 = { "C++", "Web Services" };
private static Product[] _prods1 = { _products[0] };
private static Product[] _prods2 = { _products[5], _products[6], _products[7], _products[3] };
private static Product[] _prods3 = { _products[0], _products[1], _products[7] };
private static Product[] _prods4 = { _products[2], _products[3] };
public static Product[] GetProducts()
{
return _products;
}
public static Product GetProductById(int id)
{
foreach (Product prod in _products)
{
if (prod.Id == id)
return prod;
}
return null;
}
public static string[] GetGroups()
{
return _groups;
}
public static string[] GetSubHeadingsByGroup(string group)
{
if (group == "Categories")
return _subheadings1;
else
return _subheadings2;
}
public static string[] GetProductsBySubHeading(string subheading)
{
if (subheading == "Graphics")
return _books1;
else if (subheading == "Internet")
return _books2;
else if (subheading == "Core Series")
return _books3;
else
return _books4;
}
public static Product[] GetProductObjectsBySubHeading(string subheading)
{
if (subheading == "Graphics")
return _prods1;
else if (subheading == "Internet")
return _prods2;
else if (subheading == "Core Series")
return _prods3;
else
return _prods4;
}
} public class Product {
public int Id; public string Name; public string Isbn; public double Price;
public Product(int id, string name, string isbn)
{
Id = id;
Name = name;
Isbn = isbn;
Price = 0.0;
}
public Product(int id, string name, string isbn, double price)
{
Id = id;
Name = name;
Isbn = isbn;
Price = price;
}
}
</source>
Using Populate On Demand and AJAX
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">
void TreeView1_TreeNodePopulate(object s, TreeNodeEventArgs e)
{
for (int i=0;i<5;i++)
{
TreeNode newNode = new TreeNode();
newNode.Text = String.Format("{0}.{1}", e.Node.Text, i);
newNode.PopulateOnDemand = true;
e.Node.ChildNodes.Add(newNode);
}
}
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>TreeView Populate On Demand</title>
</head> <body>
<form id="form1" runat="server">
<%=DateTime.Now.ToString("T") %>
<asp:TreeView
ID="TreeView1"
ExpandDepth="0"
OnTreeNodePopulate="TreeView1_TreeNodePopulate"
Runat="server">
<Nodes>
<asp:TreeNode
PopulateOnDemand="true"
Text="Node 0" />
</Nodes>
</asp:TreeView>
</form>
</body> </html>
</source>
Using Styles with the TreeView control.
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<style type="text/css">
.treeNode
{
color:blue;
font:14px Arial, Sans-Serif;
}
.rootNode
{
font-size:18px;
width:100%;
border-bottom:Solid 1px black;
}
.leafNode
{
border:Dotted 2px black;
padding:4px;
background-color:#eeeeee;
font-weight:bold;
}
</style>
<title>TreeView Styles</title>
</head> <body>
<form id="form1" runat="server">
<asp:TreeView
id="TreeView1"
NodeStyle-CssClass="treeNode"
RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode"
Runat="server">
<Nodes>
<asp:TreeNode
Text="Home">
<asp:TreeNode Text="Products">
<asp:TreeNode Text="First Product" />
<asp:TreeNode Text="Second Product" />
</asp:TreeNode>
<asp:TreeNode Text="Services">
<asp:TreeNode Text="First Service" />
<asp:TreeNode Text="Second Service" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body> </html>
</source>
