Data Binding TreeView in C#

• Download demo project - 179 Kb
• Download source - 187 Kb

Introduction

This is a C# implementation of data binding TreeView control. It can bind a regular TreeView control with multiple tables and display hierarchical data.

Background

When I was searching for such a data binding TreeView in C#, I could not find any, except a VB.NET version posted on MSDN. I decided to convert it to Visual C#. The original article and code, written by Duncan Mackenzie of MSDN, can be found at the link here. During the conversion, I found the original code to be too complicated. So, I made some changes to simplify the control itself and to make the use of the control easier.

The Control

Although I am not the original author of the control, I would like to introduce it to all C# developers as I found it is a very useful and easy to use tree view control. The TreeView control can be bound to any data source supporting IList or IListSource. It uses the CurrencyManager object to access the bound data source. The CurrencyManager can also ensure that multiple controls bound to the same data source will stay on the same item in the data source. In the demo sample (mostly converted from the original sample), when you click a tree node, the right panel shows the related data bound to the same data source as the TreeView control.

Using the code

In the demo, data was retrieved from four Microsoft Access tables:

After the data is retrieved into a DataView object, it can be bound to the TreeView control using its DisplayMember, ValueMember, and DataSource member properties as follows:

    this.myTree.DisplayMember = “title”;
    this.myTree.ValueMember   = “title_id”;
    this.myTree.DataSource    = this.myDataView;

So far, data in the TreeView control is bound to the tables in a flat pattern. It displays only the book titles like this:

In order to display data in hierarchy, the data needs to be sorted and grouped. From the data tables above, we can see that the data can be grouped by Publisher, Author, Title, or the combinations of them. To display the hierarchical data as shown in the beginning, the following code needs to be added for sorting and grouping:

    this.myDataView.Sort = “pub_id, au_id, title_id”;
    this.myTree.AddGroup ("Publisher", "pub_id", "pub_name", "pub_id", 0, 0);
    this.myTree.AddGroup ("Author", "au_id", "au_name", "au_id", 1, 3);

It first groups the data by Publisher, and then by Author. Both the publisher and author nodes in the tree are group nodes, while the book title nodes are leaf nodes. Each of the nodes carry a Value member, which could be the IDs to identify themselves. In this case, the Value members are pub_id, au_id, and title_id.

In the demo project, I added a menu to show how to change the groups. Groups can be added by checking the menu items, and removed by unchecking them. The following example groups data by Author and Title with publishers as leaves.

Although you do not need to add a group for the leaves, you need to let the tree know which data group should be used as the leaves. For example, if the data is grouped by Publisher only, what will be the leaf nodes, the authors or the book titles? For this reason, I added a method in the TreeView control called SetLeafData(). You can set all the leaf data via the control’s member properties, such as DisplayMenmber, ValueMember, ImageIndex, etc. This method is just a simple way to do everything at once. It also assigns a name for the leaf group, which is useful when retrieving data from the nodes.

This control contains useful functions to let you retrieve data from the nodes easily. Its FindNodeByValue() method allows you to locate a leaf node by its value. For example, if book titles are the leaf nodes and title_id is the value member of the nodes, entering a title ID will automatically select the book with that ID. The control’s FindNodeByPosition() method allows you to locate a leaf node by the row index in the data source.

Changes made to the original code

Besides what have been mentioned early, the major change was combining two derived TreeNode classes into one: dbTreeNode, and adding a method IsLeafNode(). The dbTreeNode class contains the following properties in addition to the regular TreeNode class:

    public String GroupName;  // the name of the group

    public object Value;      // the value member to identify the node

    public object Item;       // the data row in the data source

    public int    Position;   // the row index in the data source

The result of this change is the elimination of the following classes, methods, and events in the control and in the code using the control:

    // In the control:

        Classes:   TreeGroupNode
              TreeLeavNode
              GroupTreeViewEventArgs
              GroupTreeViewCancelEventArgs
              LeafTreeViewEventArgs
              LeafTreeViewCancelEventArgs

        Methods:   FindFirstLeafNode()
              OnBeforeSelect()
              OnAfterSelect()
              currcyManager_PositionChanged()

        Events:      public delegate void BeforeGroupSelHandler()
              public event BeforeGroupSelHandler BeforeGroupSelect;
              public delegate void AfterGroupSelHandler()
              public event AfterGroupSelHandler AfterGroupSelect;
              public delegate void BeforeLeafSelHandler()
              public event BeforeLeafSelHandler BeforeLeafSelect;
              public delegate void AfterLeafSelHandler()
              public event AfterLeafSelHandler AfterLeafSelect;

        Event Handlers:
              private void currcyManager_PositionChanged()
    
      // In the code using the control:

        Event Handlers:
              private void myTree_BeforeGroupSelect()
              private void myTree_AfterGroupSelect()
              private void myTree_BeforeLeafSelect()
              private void myTree_AfterLeafSelect()

The other change was adding the ability to disable the control’s auto-builder feature. In the original control, the tree was built or rebuilt whenever assigning a data source, adding a group, or removing a group. To display a three-level hierarchical tree as shown at the beginning, the tree was built 3 times. Only the last time, it generates the desired result. For large amounts of data, this would slow down the process, so I added an AutoBuilder property to allow this feature to be disabled. Once the auto-build feature is disabled, you need to call the BuildTree() function explicitly as follows:

    this.bookDataView.Sort = "pub_id, au_name, title_id";
    this.myTree.DataSource = this.bookDataView;
    this.myTree.AddGroup ("Publisher", "pub_id","pub_name", "pub_id", 0,0);
    this.myTree.AddGroup ("Author", "au_id", "au_name", "au_id", 1, 3);
    this.myTree.SetLeafData ("Title", "title", "title_id", 2, 2);
    this.myTree.BuildTree();

Conclusion

I hope this is a useful tree-view control to you. Credits should be given to the original author Duncan Mackenzie of MSDN. As he said in the original article: “The data-bound Tree control shown in this article will not be the answer for every project that needs a Tree control to display information from a database, but it does illustrate one way in which you could customize this control for your own purposes. Keep in mind that the majority of the code in this control would be essentially the same in any complex data-bound control you wish to build, and that you can leverage that existing work to make future control development easier.”

Once again, the original code and article can be found at the link here. When you read the original article, please note that some sections may not apply to this C# implementation as many code have been eliminated. I wish that my modifications have simplified the original code without losing its functionalities, and that it will benefit C# users.