Click here to Skip to main content
Click here to Skip to main content

DataBound TreeView

, 25 Oct 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
A TreeView that can be bound to a DataTable, and can keep track of changes in it.

Changes made to the table in the Datagrid are shown at the same time at the Treeview (from demo project).

Changes made to the table in the DataGrid are shown at the same time at the TreeView (from demo project).

Introduction

Like so many others, when I needed to use the TreeView control, I found myself doing a Load method adapting the data from a DataTable or a DataView into the TreeView, over and over again. Furthermore, I had to maintain the same data in the control if the values changed.

The purpose of this article is to show you how to develop a TreeView that can be bound to a datasource and can keep track of the changes made in the data, updating the nodes.

Main Objective

  • Load the data in the tree structure.
  • Keep track of changes in the data, showing them in the control.
  • Expose a get/set property like SelectedValue besides SelectedNode, generally you have the value of the node you want to select (but not the node itself!!!).

Class Structure

There are two classes in the project, the TreeNodeBound class that inherits from TreeNode and exposes two properties: Value and ParentValue; and the TreeViewBound (the control itself) class that exposes the DataSource, DisplayMember, ValueMember, and ParentMember properties.

Loading the Data

Let's have a look at the LoadTree function in the TreeViewBound class. I used a Hashtable to place the nodes by ValueMember, that's where the trick is.

private void LoadTree()
{
    
    if (this._datasource != null)
    {
        Clear();
        //Iterate throght the DataRow Collection
        foreach (DataRow dr in this._datasource.Rows)
        {
            TreeNodeBound node = 
                new TreeNodeBound(dr[this._displayMember].ToString());
            node.Value = dr[this._valueMember];
            node.ParentValue = dr[this._parentMember];
            //Add it to the HashTable
            _nodesByValueMember.Add(node.Value, node);
        }
        //Iterate throught the nodes Collection
        foreach (TreeNodeBound node in _nodesByValueMember.Values)
        {
            if (node.ParentValue != _rootParentValue)
            {
                //look for the parent node
                TreeNodeBound parent = 
                    (TreeNodeBound) _nodesByValueMember[node.ParentValue];
                //add it to the nodes collection of the parent node
                parent.Nodes.Add(node);
            }
            else
            {
                //the node is a Root, add it to the root collection
                base.Nodes.Add(node);
            }
        }
    }
}

First, I create the nodes and add it to the Hashtable. Then, I iterate through the nodes, look for the parent node of the node (by the ValueMember again) and add it as a child of the parent. If the node has no parent, it's a root node and I have to add it to the root collection.

Because classes in .NET are reference types, the whole tree structure is loaded. By doing this, we avoid doing a while (!finish) type algorithm, very frequently used in biz.

Keeping Track of Data Changes

For that, I subscribe to the events in the DataSource property.

//subscribe to datatable events
value.RowDeleting += new DataRowChangeEventHandler(value_RowDeleting);
value.RowChanged += new DataRowChangeEventHandler(value_RowChanged);

There are four possible changes that are taken care of:

  • Adding
  • Deleting
  • Modifying the DisplayMember value of a node.
  • Modifying the parent value (which involves removing it from the old parent collection and adding it to the new one).

Getting/Setting the SelectedValue

Both cases are trouble-free because of the use of the TreeNodeBound class and the Hashtable.

public object SelectedValue
{
    get
    {
        if (this.SelectedNode != null)
        {
            return ((TreeNodeBound)this.SelectedNode).Value;
        }
        else
        {
            return null;
        }
    }
    set
    {
        if (value != null)
        {
            this.SelectedNode = 
                (TreeNodeBound) _nodesByValueMember[value];
        }
    }
}

Summary

At first, I came with the idea of a TreeView control that could be bound to any object that implements IList or IListSource like in other controls such as the ComboBox, but with this type of data sources the control couldn't keep track of changes. So, I cut back some functionality to add another one, which I think, is more useful. I look forward to your thoughts.

History

  • October 11th, 2005 - article submitted.

License

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

Share

About the Author

Jorge Bay Gondra
Software Developer
Spain Spain
Jorge has been working in Software development for more than 10 years. Born in Argentina, he lives in Spain since 2004.
 
He worked as a consultant for mayor companies including Log, HP and Avanade and holds some technical certifications including MCSD and MCAD.
 
He is the founder of the asp.net mvc forum open source project Nearforums, the Node.js Cassandra driver and the owner of the news release site prsync.com.
 
Follow him on Twitter: twitter.com/jorgebg
 
Contact: jorgebaygondra at gmail
Follow on   Twitter

Comments and Discussions

 
General5 PinmemberJosemaproject25-Feb-09 6:04 
GeneralNice App PinmemberFranciscoR31-Jan-07 3:54 
GeneralDataViewManager Pinmemberiakob11-Jan-07 3:56 
GeneralYou must ignore or exclude items where ID = ParentID PinmemberDMILE52525-Oct-06 11:29 
GeneralTreeview with database Pinmemberkenneth23723-Oct-06 18:29 
GeneralRe: Treeview with database PinmemberJorge Bay Gondra24-Oct-06 23:38 
NewsNew site PinmemberJorge Bay Gondra23-Aug-06 4:56 
GeneralRe: New site [modified] Pinmemberjosemaocu23-Aug-06 5:00 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 25 Oct 2006
Article Copyright 2005 by Jorge Bay Gondra
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid