Click here to Skip to main content
14,694,371 members
Articles » Desktop Development » Tree Controls » TreeView Controls
Posted 27 Mar 2005


81 bookmarked

Hierarchical TreeView Control with Data Binding Enabled

Rate me:
Please Sign up or sign in to vote.
4.46/5 (17 votes)
27 Mar 2005CPOL
The control extends standard TreeView control to make it fully data bind.

Sample Image - bindablehierarchicaltree.gif


Some time ago, my task was to write something like a virtual file system. Of course, I decided to use typed DataSets because I had already written a framework to work and update them easily. With this technology, it is very easy to display the content of a folder. Relational DataTables are very great tools for this. That’s all right, but when I saw the result - I died! That was not the look and feel that I had mentioned to my client! So I opened Google and started searching for TreeView with data binding enabled. Of course, I found something: this (Data Binding TreeView in C#) was pretty but that was not the hierarchy in my mind; this (How to fill hierarchical data into a TreeView using base classes and data providers) was pretty too but I didn't understand why the author doesn't like standard binding. Both were not for me! And as a real Ukrainian man, I decided to write my own!

Binding Implementation

First of all, we need a method to fill all the data in the tree view. For this, I store references of the data items in the ArrayList. This gives me an indicator of the items that are not in the tree. I will iterate through the items until the length of this array becomes 0. This realization will throw an exception if some of the items cannot find their places in the try. If you need another realization of this (for example, do nothing or store these items on the bottom of the root node), please let me know. I will try to update this article.

ArrayList unsortedNodes = new ArrayList(); 
//This is list of items that still have no place in tree

for (int i = 0; i < this.listManager.Count; i++)
    //Fill this list with all items.
    unsortedNodes.Add(this.CreateNode(this.listManager, i));

int startCount;

//Iterate until list will not empty.
while (unsortedNodes.Count > 0)
    startCount = unsortedNodes.Count;

    for (int i = unsortedNodes.Count-1; i >= 0 ; i--)
        if (this.TryAddNode((DataTreeViewNode)unsortedNodes[i]))
            //Item found its place.

    if (startCount == unsortedNodes.Count)
        //Throw if nothing was done, in another way this 
        //will continuous loop.
        throw new ApplicationException("Tree view confused 
                      when try to make your data hierarchical.");

private bool TryAddNode(DataTreeViewNode node)
    if (this.IsIDNull(node.ParentID))
        //If parent is null this mean that this is root node.
        this.AddNode(this.Nodes, node);                
        return true;
        if (this.items_Identifiers.ContainsKey(node.ParentID))
            //Parent already exists in tree so we can add item to it.
            TreeNode parentNode = 
                    this.items_Identifiers[node.ParentID] as TreeNode;
            if (parentNode != null)
                this.AddNode(parentNode.Nodes, node);                
                return true;
    //Parent was not found at this point.
    return false;

Respond to External Data Changes

Okay… now we have our tree view filled with all items. Second one that we need is to respond to external data changes. For this, we need to handle the ListChanged event of the current context.

((IBindingList)this.listManager.List).ListChanged += 
                     new ListChangedEventHandler(DataTreeView_ListChanged);

Realization of the handle is very simple.

private void DataTreeView_ListChanged(object sender, ListChangedEventArgs e)
        case ListChangedType.ItemAdded:
            //Add item here.

        case ListChangedType.ItemChanged:
            //Change node associated with this item

        case ListChangedType.ItemMoved:
            //Parent changed.

        case ListChangedType.ItemDeleted:
            //Item removed

        case ListChangedType.Reset:
            //This reset all data and control need to refill all data.

Now our control particularly supports data binding. You are able to see data, it will change synchronously with external data.

Selected Node

You can ask what additional functionality is required? - Oh! this is only the start.

So the next point: If you change the data source position, our control will not change it. Currency manager has a PositionChanged event. We will use it.

this.listManager.PositionChanged += 
                  new EventHandler(listManager_PositionChanged);

At the start point, we added index for positions and nodes according to them. This gives us an easy way to find a node by its position. So this short code will give us the ability to find the selected node by its position.

DataTreeViewNode node = 
          this.items_Positions[this.listManager.Position] as DataTreeViewNode;
if (node != null)
    this.SelectedNode = node;

Current Context Position

Now you are not able to use this control as parent to your table. Basically, all that we need is according to the selection of the node, change position of the context. This is not a problem as we store position of the item in each node. Make the AfterSelect event:

private void DataTreeView_AfterSelect(object sender,
                              System.Windows.Forms.TreeViewEventArgs e)
    DataTreeViewNode node = e.Node as DataTreeViewNode;
    if (node != null)
        //Set position.
        this.listManager.Position = node.Position;

Label Editing

Not a problem! Just use AfterLabelEdit.

private void DataTreeView_AfterLabelEdit(object sender, 
                           System.Windows.Forms.NodeLabelEditEventArgs e)
    DataTreeViewNode node = e.Node as DataTreeViewNode;
    if (node != null)
        //This will found appropriate converter for 
        //type and see if it can convert from string. 
        if (this.PrepareValueConvertor()
          && this.valueConverter.IsValid(e.Label)//Lets converter to check value.
            //Set property.
    //Node text are not editable.
    e.CancelEdit = true;

Using the Code

As DataSource you can use any data that, for example, DataGrid can use. You can use any type of columns to bind. Basically, only the name column is limited to types that can be converted from string. This applies only when EditLabel is true.

In most cases, data must have three columns: Identifier, Name and Identifier of parent row. If you need something like 'FirstName + " " + LastName' as Name field - you can make autocomputed columns in DataSet.

I am not including image index in binding because I didn't need it. Let me know if you need this functionality. I will update this article.


First bonus is full design time support. Unlike all other data bound trees on “Code Project”, this tree view has all standard designers that, for example, DataGrid has (of course, with some changes, see Design namespace). Second one is roundup framework bug with bottom scrollbar in TreeView (scroll bar is visible all the time, even if it is not needed at all).

That’s all! Enjoy. Visit my blog for the latest news!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Comments and Discussions

GeneralBug after Reset List -> Performance decrease Pin
rodionmarx16-Feb-11 0:53
Memberrodionmarx16-Feb-11 0:53 
Questionproblem when change datasource Pin
msanaei16-Aug-10 22:20
Membermsanaei16-Aug-10 22:20 
GeneralControl Not working for me Pin
Noman Siddiqui12-Apr-10 10:01
MemberNoman Siddiqui12-Apr-10 10:01 
GeneralVB.NET Code Pin
Muhammad Waseem Tahir31-May-08 5:58
professionalMuhammad Waseem Tahir31-May-08 5:58 
GeneralRe: VB.NET Code Pin
gutsfun7-Oct-10 5:30
Membergutsfun7-Oct-10 5:30 
QuestionAbout Gridview control in 2.0 + Data binding Pin
Samiullah27-May-08 21:46
MemberSamiullah27-May-08 21:46 
QuestionRecursive Pin
danielab6-Sep-07 8:01
Memberdanielab6-Sep-07 8:01 
QuestionTreeView COnfused when using filtered BindingSOurce Pin
corsairX9-Nov-06 23:21
MembercorsairX9-Nov-06 23:21 
QuestionDo we have the right version? Pin
throwit19-Aug-06 20:43
Memberthrowit19-Aug-06 20:43 
GeneralAbout hide the HScrollbar in TreeView Pin
bjleo14-Feb-06 0:33
Memberbjleo14-Feb-06 0:33 
GeneralRe: About hide the HScrollbar in TreeView Pin
Mike Chaliy14-Feb-06 0:45
MemberMike Chaliy14-Feb-06 0:45 
QuestionChanging Parent Bug Pin
Emma M18-Jan-06 0:21
MemberEmma M18-Jan-06 0:21 
QuestionImplementing Drag and Drop Pin
Emma M16-Jan-06 7:13
MemberEmma M16-Jan-06 7:13 
AnswerRe: Implementing Drag and Drop Pin
Mike Chaliy16-Jan-06 11:11
MemberMike Chaliy16-Jan-06 11:11 
GeneralRe: Implementing Drag and Drop Pin
Emma M16-Jan-06 23:34
MemberEmma M16-Jan-06 23:34 
AnswerRe: Implementing Drag and Drop Pin
Jeremy Thomas13-Feb-06 17:02
MemberJeremy Thomas13-Feb-06 17:02 
GeneralRe: Implementing Drag and Drop Pin
Emma M13-Feb-06 23:10
MemberEmma M13-Feb-06 23:10 
GeneralRe: Implementing Drag and Drop Pin
SmithSystems24-Feb-06 17:39
MemberSmithSystems24-Feb-06 17:39 
GeneralRe: Implementing Drag and Drop Pin
NickOberoi13-Feb-08 12:08
MemberNickOberoi13-Feb-08 12:08 
GeneralRe: Implementing Drag and Drop Pin
Jeremy Thomas13-Jan-10 1:03
MemberJeremy Thomas13-Jan-10 1:03 
GeneralRe: Implementing Drag and Drop Pin
MarkJoel6025-Aug-10 5:04
MemberMarkJoel6025-Aug-10 5:04 
Generalbug not only when delete Pin
byx4523-Oct-05 10:10
Memberbyx4523-Oct-05 10:10 
GeneralRe: bug not only when delete Pin
Mike Chaliy11-Nov-05 4:08
MemberMike Chaliy11-Nov-05 4:08 
GeneralProblems using custom collection Pin
hcan21-Jul-05 11:32
Memberhcan21-Jul-05 11:32 
GeneralRe: Problems using custom collection Pin
Mike Chaliy11-Nov-05 4:07
MemberMike Chaliy11-Nov-05 4:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.