XtraTreeView: Display a tree structure easily (Binding to an IList<> data source)

Today I found yet another example that most blog posts do not need to describe something extremely complicated to be helpful. I was talking to a co-worker at University about the fact that the standard TreeView control that is being delivered with the .NET libraries is a bit unusual to use. Especially, binding data to it is not an easy thing to do.

I immediately thought of XtraTreeView by DevExpress, which is a very complex control, but also yields excellent results without looking at it in great detail to get “some neat results and fast”.

For example, I had the task to display the folder structure of an Outlook data file. With the standard control you would need to add the nodes recursively, but with XtraTreeView you can data bind to a simple generic list structure. To be precise: List<myClass>.

The next screenshot shows the result you get by simply assigning the list to the data source property of the XtraTreeGrid:

You might ask “How can a tree be built from a one-dimensional list/array of objects?”. If I remember correctly, the VirtualTreeGrid component by Mike Lischke offers the same approach if I am not mistaken. I emphasize: If I remember correctly.

The hierarchy is being built using a property as Id which identifies every object uniquely and another property which denotes the parent object using this very Id.

This is the object that I want to display:

[code lang="c#"]
public class FolderTreeItem
{
public int Id { get; set; }
public int ParentId { get; set; }
public string NameShort { get; set; }
public string NameFull { get; set; }
public bool IsContactFolder
{
get
{
return isContactFolder();
}
}

…
[/code]
Note that all the information I want to display is stored in public properties. I also define two integer properties for the Id and ParentId.

My datasource consists of a generic list of these objects. If I assigned the datasource to a default XtraTreeList, just dropped on the form, it would be a list. No hierarchy would be created.

The XtraTreeList instance has two properties which one needs to adjust for the data source being used. The properties are called KeyFieldName and ParentFieldName. You may guess what values you have to enter there. KeyFieldName is being set to “Id” and ParentFieldName has to be “ParentId”.

That’s it.

After this giant modification XtraTreeList is able to display the list as a hierarchy. Not a lot of “work” was it?

The click event of the button which retrieves looks like this:

[code lang="c#"]
private void simpleButton1_Click(object sender, EventArgs e)
{
ConnectionWrapper wrapper = new ConnectionWrapper();
dataSource = wrapper.TreeItems;
trFolders.DataSource = dataSource;
}
[/code]

Due to the encapsulation of the Outlook part in a separate class and the use of a data structure which is prepared for the XtraTreeList the work to create a user-friendly GUI is minimal.

XtraTreeList is a component in the Winform component pack for the Microsoft .NET platform by DevExpress. More information on DevExpress.com.