Top ASP 101 Stories VBScript Classes: Part 1 of N Migrating to ASP.NET Getting Scripts to Run on a Schedule QUICK TIP: Rating the content of your web site Show All Tips >>  ASP 101 Updates

A True Tree User Control for Presenting Hierarchical Data

Overview

The standard TreeView control that is available in .NET is powerful and sufficient in most cases, but there are situations where seeing data in a true tree format is more intuitive vs. seeing data in the TreeView. The focus of this article is to show how to present hierarchical data in a true tree format, as an alternative to using the standard TreeView control.

Terminology

Throughout this article, the name TreeEx will be used as a short form for the True Tree Control while the name TreeView will be used to refer to the standard TreeView control provided in .NET.

User Control Code

The TreeEx User control code is provided the the end of the article for download. The sample code is provided for free and, as such, is provided as-is with no guarantees. Anyone can use it and extend it as per their requirements. The author takes no responsibilities for the code or any modifications to it.

Why TreeEx?

The TreeView control provided by Microsoft is feature rich and is widely used in many navigational or browser user interfaces. The TreeEx control introduced in this article, is designed to show a different way to present hierarchical data which may be better for some uses. There are cases where seeing hierarchical data in its natural tree form is more intuitive. In these cases, the TreeEx control may be a better choice for developers.

TreeEx Features

The following features are supported in the TreeEx control:

• Design time support to manipulate tree rendering properties and event handling
• Presenting hierarchical data in True tree format
• Customizable presentation with ShowLines, ShowLabels properties
• Customizable Node properties like: Color, Width, Height etc
• Event handler to fire 'Selected Node Changed' event
• Re-draw tree based on re-size/re-paint control events
• Customizable Label text direction
• Expand/Collapse feature

There are many key features (ex: dragging, scrolling) that are not implemented in the TreeEx control. They can be easily added with little bit of development effort. These features are not added intentionally to keep the focus of the article and sample code on core functionality.

Fig. 1. Design-time properties for TreeEx control. (Not all are shown here)

The following screenshots show few different ways TreeEx control can be customized:

Fig. 2. True Tree Control - Presenting Hierarchical data true tree presentation:

Fig. 3. TreeEx without lines and larger nodes

Fig. 4. TreeEx with lines and no labels + elliptical nodes with different color scheme

A Few tips for Developers

1. Drawing objects on a form: The System.Drawing.Graphics class has many methods that are useful for drawing different graphic objects (ex: lines, circles, ellipses, rectangles etc). Following is sample code to do this:

   // Get Graphics object
   Graphics gph = Graphics.FromHwnd(this.Handle); 
   // Draw ellipse
   gph.FillEllipse(drawBrush, X, Y, Width, Height);
   // Clean up
   gph.Dispose();
   

2. Making user control properties available in designer: There is no extra work required in this case. If the property is of known type to .NET, all that is required is to expose public get/set property method as follows:

   public Color NodeColor
   {
       get { return _DrawBrush.Color; }
       set { _DrawBrush.Color = value; }
   }
   

   The good thing is, the designer takes care of showing Color selection combobox OR Font selection depending on the type of property.

3. Adding events to user control: Events and delegates are good way to externalize functionality and provide generic class/control. Code is more re-usable this way, as some implementation details can be customized by the consumer.

   The following is the sample code defining control events:

   // <summary>
   /// Selected Node Changed event handler type
   /// </summary>
   public delegate void SelectedNodeChangedHandler(object sender, NodeChangedEventArgs e);
   
   /// <summary>
   /// Selected Node Chaneged Event handler
   /// </summary>
   public event SelectedNodeChangedHandler SelectedNodeChanged;
   
   /// <summary>
   /// Helper function - fires SelectedNode Event handler if valid
   /// </summary>
   /// <param name="e"></param>
   protected virtual void OnSelectedNodeChanged(NodeChangedEventArgs e) 
   {
       if(SelectedNodeChanged != null)
           SelectedNodeChanged(this, e);
   }
   

Download

You can download the TreeEx control (including source code) and the test code that goes with this article from here: TreeEx.zip (85 KB).

About the Author

Jay Tallamraju is working as Software Architect for Thomson Financial based in Boston. He is MCP of .NET, MCSD (Microsoft Certified Solution Developer) and SCJD (Sun Certified Java Developer). Jay holds an MS in Electronics and has been working in the software industry for over 10 years. He is focused more in building server architecture and in building reusable business components. His current area of expertise is in Microsoft technologies such as .NET, C#, Web services, ASP.NET, VC++/VB, COM/DCOM, ASP/IIS. He can be reached at tjayram@yahoo.com.

Click here for more articles from this author.