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.vb

 

Imports System.Collections.Generic

Imports System.Linq

Imports System.Web

Imports System.Web.UI

Imports System.Web.UI.WebControls

Imports System.Data

Imports System.IO

 

Namespace TreeViewVB

Public Partial Class TreeViewTest

Inherits System.Web.UI.Page

 

Protected Shared ds As DataSet = Nothing

Protected Shared dtBook As DataTable = Nothing

Protected Function InitData() As Boolean

If ds Is Nothing Then

Dim file As String = Path.Combine(Request.PhysicalApplicationPath, “App_Data\BooksList.xml”)

Dim fs As New FileStream(file, FileMode.Open)

ds = New DataSet()

ds.ReadXml(fs)

dtBook = ds.Tables(“Book”)

Return True

End If

Return False

End Function

Protected Sub Page_Load(sender As Object, e As EventArgs)

If Not Page.IsPostBack Then

InitData()

For Each row As DataRow In dtBook.Rows

Dim nodeBook As 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)

Next

End If

End Sub

Protected Sub TreeView1_TreeNodePopulate(sender As Object, e As TreeNodeEventArgs)

InitData()

For Each row As DataRow In dtBook.Rows

If row.ItemArray.Contains(e.Node.Value.ToString()) Then

Dim nodeTitle As New TreeNode(“Title: ” & row(“Title”).ToString())

Dim nodeAuthor As New TreeNode(“Author: ” & row(“Author”).ToString())

e.Node.ChildNodes.Add(nodeTitle)

e.Node.ChildNodes.Add(nodeAuthor)

End If

Next

End Sub

End Class

End Namespace

The next pictures present the results:

 

A test page with the TreeView control in VB.NET

A test page with the TreeView control in VB.NET

 

 

The populate-on-demand feature in action in VB.NET

The populate-on-demand feature in action in VB.NET