If your project has a large amount of data to display in a TreeView, you probably don’t want to fill it in all at once, because that increase the time taken to process the initial request for the page, and also increase the size of the page and the view state. The TreeView includes a populate-on-demand feature that makes it easy to fill in branches of the tree as they are expanded. You can use populate-on-demand on selected portions of the tree.
You can use populate-on-demand by setting the PopulateOnDemand property to true for any TreeNode that has content you want to fill in at the last minute. When the user expands this branch, the TreeView fires a TreeNodePopulate event, which you can use to add the next levels of nodes. If you want, this level of nodes can contain another level of nodes that are populated on demand.
The TreeView supports two techniques for filling in the on-demand node:
1. When the TreeView.PopulateNodesFromClient property is true (the default), the TreeView performs a client-side callback to retrieve the nodes it needs from your event, without posting back the entire page.
2. If PopulateNodesFromClient is false, or if it’s true but the TreeView detects that the current browser doesn’t appear to support client callbacks, the TreeView triggers a normal postback to get the same result. The only difference is that the entire page will be refreshed in the browser, generating a less seamless interface.
In the next example this approach is illustrated. Instead of filling the whole tree when the page loads, you would begin by adding just the category nodes and setting them to populate on demand. In the example as a source of data for the TreeView control an xml file named BooksList.xml which is placed in the folder App_Data is used:
Xml file BooksList.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<BooksList>
<Book ISBN-13=”978-0545139700″>
<Title>Harry Potter and the Deathly Hallows</Title>
<Author>J.K. Rowling</Author>
<Price>14.99</Price>
<Available>True</Available>
<AdditionalInfo>
<Pages>784</Pages>
<Publisher>Arthur A. Levine Books</Publisher>
<Date>July 7, 2009</Date>
</AdditionalInfo>
</Book>
<Book ISBN-13=”978-1451648539″>
<Title>Steve Jobs</Title>
<Author>Walter Isaacson</Author>
<Price>14.88</Price>
<Available>True</Available>
<AdditionalInfo>
<Pages>656</Pages>
<Publisher>Simon and Schuster</Publisher>
<Date>October 24, 2011</Date>
</AdditionalInfo>
</Book>
<Book ISBN-13=”978-0765309761″>
<Title>Tunnel Vision</Title>
<Author>Gary Braver</Author>
<Price>14.15</Price>
<Available>False</Available>
<AdditionalInfo>
<Pages>383</Pages>
<Publisher>Forge</Publisher>
<Date>June 21, 2011</Date>
</AdditionalInfo>
</Book>
</BooksList>
File TreeViewTest.aspx
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:Label ID=”LblInfo” runat=”server” Text=””></asp:Label>
<asp:TreeView ID=”TreeView1″ runat=”server”
ontreenodepopulate=”TreeView1_TreeNodePopulate”>
</asp:TreeView>
</div>
</form>
</body>
File TreeViewTest.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
namespace TreeViewVC
{
public partial class TreeViewTest : System.Web.UI.Page
{
protected static DataSet ds = null;
protected static DataTable dtBook = null;
protected bool InitData()
{
if (ds == null)
{
string file = Path.Combine(Request.PhysicalApplicationPath, “App_Data\\BooksList.xml”);
FileStream fs = new FileStream(file, FileMode.Open);
ds = new DataSet();
ds.ReadXml(fs);
dtBook = ds.Tables[“Book”];
return true;
}
return false;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
InitData();
foreach (DataRow row in dtBook.Rows)
{
TreeNode nodeBook = new TreeNode(
“ISBN-13:” + row[“ISBN-13”].ToString(),
row[“ISBN-13”].ToString());
// Use the populate-on-demand feature for this
// node’s children.
nodeBook.PopulateOnDemand = true;
// Make sure the node is collapsed at first,
// so it’s not populated immediately.
nodeBook.Collapse();
TreeView1.Nodes.Add(nodeBook);
}
}
}
protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
InitData();
foreach (DataRow row in dtBook.Rows)
{
if (row.ItemArray.Contains(e.Node.Value.ToString()))
{
TreeNode nodeTitle = new TreeNode(
“Title: ” + row[“Title”].ToString());
TreeNode nodeAuthor = new TreeNode(
“Author: ” + row[“Author”].ToString());
e.Node.ChildNodes.Add(nodeTitle);
e.Node.ChildNodes.Add(nodeAuthor);
}
}
}
}
}
The next pictures present the results:
A test page with the TreeView control in C#
The populate-on-demand feature in action in C#