C# Virtual Tree Implementation

September 18, 2007

Introduction

This is my first my first blog, so I picked a simple topic to talk about: Implementing the simplest virtual treeview possible.

Large data and large metadata are problems I run into on every project I work on, providing search capabilities makes browsing large amounts of information possible, but somewhere you’re going to have a Treeview, a Listview or a Grid that is going to need to present some unknown amount of information. How you handle this unknown is what makes your application scalable, or come to grinding halt.

Making your UI controls “Virtual” is also a important to keep your UI thread from locking up. Don’t load massive amounts of data that will never be viewed or needed. Virtual (in this context) simply means you only load the amount of data that is being displayed to the user, but give visual cues that there is more data. The .NET Listview nativly implements a virtual view so listview items can be loaded on demand, also most popular 3rd party grids have some sort of virtual support, but the .Net Treeview control doesn’t…

Using the code

Synchronous Virtual Treeview

The logic for implementing a synchronous virtual treeview is extremly simple, but doesn’t come without its flaws.

Load your root nodes

Add a child node to each root node with the name VIRT. This causes the treeview to put a plus sign next to each node.

Catch the onBeforeExpand event and if the VIRT node is a child of the node being expanded then replace it with the real children.

Add a VIRT node to each of the newly added children. (unless you know for sure it’s a leaf node)

private void treeVirt1_BeforeExpand( object sender, TreeViewCancelEventArgs e )
{
// If the node being expanded contains a virtual node then
// we need to load this node's children on demand. If it doesn't
// contain a virtual node then we already did it, so do nothing.
if( e.Node.Nodes.ContainsKey( VIRTUALNODE ) )
{
try
{
// Do some work to load data.
// Note this may take a while and could
// be annoying to your user.
// See asynchronous version below.
// Clear out all of the children
e.Node.Nodes.Clear();
// Load the new children into the treeview.
string[] arrChildren = new string[] { "Grapes", "Apples", "Tomatoes", "Kiwi" };
foreach( string sChild in arrChildren )
{
// Be sure to add virtual nodes to new items that "may"
// have children. If you know for sure that your item is
// a leaf node, then there's no need to add the virtual node.
TreeNode tNode = e.Node.Nodes.Add( sChild );
AddVirtualNode( tNode );
}
}
catch
{
// Error occured, reset to a known state
e.Node.Nodes.Clear();
AddVirtualNode( e.Node );
}
}
}

This algorithm is very simple to implement and defers load time of data when/if needed. This implementation is good for simple applications where all the data is local and loading a branch of data is quick. However if you need to make a server call to load a branch, that could take… forever… And since you’re doing the work on the UI thread you’ll lock up your entire application. It’s trivial to extend this algorithm to use a background worker thread to load your data asynchrounously.

Asynchronous Virtual Treeview

The logic for implementing an asynchronous virtual treeview is slightly different. Instead of catching the OnBeforeExpand event we catch the OnAfterExpand, we then use a BackgroundWorker thread so we can load the data (time consuming operation) on a thread other than the UI thread. We can’t touch UI objects from other threads, but that’s the beauty of the BackgroundWorker thread, its callback event fires on the UI thread. So when the RunWorkerCompleted event fires you can take the data you loaded on the other thread and create TreeNodes out of it. When the RunWorkerCompleted event runs you’ll need to know what TreeNode initiated the request (this way we know who to add the new nodes to) so we’ll send it “along for the ride” on the BackgroundWorker thread, but remember DO NOT use the TreeNode on the BackgroundWorker thread’s DoWork function. You can’t use UI controls on threads other than the thread that created them. (That’s actually not true, you can use BeginInvoke, maybe that will be my next blog).

Load your root nodes

Add a child node to each root node with the name VIRT. This causes the treeview to put a plus sign next to each node.

Catch the onAfterExpand event

Create a BackgroundWorker thread and pass in the TreeNode and any other needed information to the DoWork function

Perform the timeconsuming operation in the DoWork function on the background thread

Return the original TreeNode as well as the results from the time consuming operation

Get the TreeNode and data from the server in the RunWorkerCompleted event

Remove the VIRT node and replace it with new TreeNodes

Add a VIRT node to each of the newly added children. (unless you know for sure it’s a leaf node)

Like this:

2 Responses to “C# Virtual Tree Implementation”

Very nice solution for a virtual tree, simple and straight forward.
I was actually searching for a true virtual tree, where the nodes themselves are loaded on demand, not just the children, since my tree is very large but it’s depth is shallow (any ideas ?).