Load Data on Demand from XML File in TreeView .NET

Created: 01 September 2013

If we have large data set, loading of entire data and creation of tree structure will take some time. To avoid this and increase overall performance of our application, we can load data on demand and update the tree structure whenever a new data is needed. Usually for TreeView control the best way to do this is by updating the tree structure whenever a node expands.

IntegralUI TreeView has a feature which enables you to load data on demand from/to XML files, memory streams or databases. There is a built-in serialization consisting of several public methods which you can use and create your own solution.

In this article we are going to explain how to use LoadOnDemand method to add child nodes to currently expanding node. For demonstration purposes we have added also an animated gif which is shown whenever the node expands for the first time. The animation lasts for 750 miliseconds, but you can change it if a loading time is longer. In our case the loading is instant, and the animation is not required, we are using it only for demonstration.

We are using a pre-built XML file called tree.xml, which has a tree structure where each node has Key property set to some unique value. We are using this value to easily locate a specific node and load a partial data from the XML file. There is no restriction on which property you can use in your solution, for example you can also use Tag or TagString properties.

At first because we are going to load data whenever a node is expanded, we need to handle the BeforeExpand event.

' Load the content only once, when node is expanded for the first time

If [String].IsNullOrEmpty(node.TagString) Then

node.AllowImageAnimation = True

' Start and enable the loading timer which will run the animation

If Not loadTimer.Enabled Then

loadTimer.Start()

loadTimer.Enabled = True

End If

End If

End If

End Sub

Because we will show animation prior data is loaded, we will add code which will start the loading timer and animation. After animation completes, we can add the code which will load data from a XML file.

In code above we are creating an object that will read the content of XML file and apply it to the currently selected node. The method searches through XML file content for a node that matches the value of Key property with the one of currently selected node. If a node is found, we will extract all child nodes from the XML file and add them to the selected node.

We also need to make sure that the node is expanded, and child nodes are shown. But also we need to avoid calling the BeforeExpand event for the second time for this node. This is done by suppressing the event from firing by using a variable supressCallback.

// If animation is running, stop it and remove the animated gif from the node

isAnimationActive = false;

this.treeView1.StopAnimation(this.treeView1.SelectedNode);

this.treeView1.SelectedNode.SelectedImage = null;

// Stop the loading timer

if (loadTimer.Enabled)

{

loadTimerValue = 0;

loadTimer.Enabled = false;

loadTimer.Stop();

}

' If animation is running, stop it and remove the animated gif from the node

isAnimationActive = False

Me.treeView1.StopAnimation(Me.treeView1.SelectedNode)

Me.treeView1.SelectedNode.SelectedImage = Nothing

' Stop the loading timer

If loadTimer.Enabled Then

loadTimerValue = 0

loadTimer.Enabled = False

loadTimer.[Stop]()

End If

To better represent the change when node is expanded or collapsed, we are also using a different image. To do this we are handling the AfterExpand and AfterCollapse events, where we change the node image to show open folder image whenever a node is expanded, and close folder image whenever a node is collapsed.

A sample project in C# and VB showing how to load data on demand from XML files is available for download from here: TreeView Load On Demand

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.