The winform TreeView component allows you to set multiple status icons, but the webform version of the control does not. This article lays out how to extend the ASP.NET TreeView control to display multiple status icons on each of its nodes.
The basis of this article spawned from a requirement I had for a project I am currently working on, which is a large scale CMS solution that manages a portal to cater for the needs of a client's varied customer base. My client has different customer types. Some customers are 'Business partners', some are "Investors" and so on. In total there are 6 different customer types, and content entered into the CMS needed to address the particular requirements of each customer type. Sometimes, content for a page would address the needs of just one customer type. In other instances, the same content could be useful to 2 or 3 of these types.
I wanted users of the CMS to be able to easily tell which content was targeted towards which customer type(s). The site is also hierarchical in structure so I knew that a TreeView control was required. The problem was, how to show multiple icons in the treeview, where each icon represents a customer type. The icons must also show a tooltip when hovered over to display the full name of the customer type.
The ImageTreeViewNode Class
Each node in a TreeView control is a
so our new
node type is based on that. By inheriting from
we get all the great built in functionality plus the ability to add some of our own. The first thing to do is to create a public property that allows our
to know which icons to dispay.
private ListDictionary m_StatusIcons;
public ListDictionary StatusIcons
m_StatusIcons = value;
I chose to go with a
because its much more performant than a HashTable when dealing with a small number of items ( less than 10 ). Each item in our ListDictionary is a key/value pair. The key holds the text for the tooltip and the value holds the filename of the icon graphic. Our new node type now has a property that can accept a list of tooltips and icons to display.
The next thing to do is override the TreeNode's
method allows you to add html tags onto the end of each displayed node. As you might expect, there is also a
method that allows markup before each node.
protected override void RenderPostText(HtmlTextWriter writer)
if (m_StatusIcons != null)
foreach (DictionaryEntry statusIcon in m_StatusIcons)
writer.AddAttribute("src", "icons/" + statusIcon.Value);
First we check if our
collection contains icons, and if it does, we iterate through each item and extract it's key and value. We use the
provided by the
method to write out an
tag that contains the attributes to display our icon. src
is the location of the icon file on our server, and alt
display the tooltip ( note: some browsers such as Firefox need the title
tag to display the tooltip, rather than alt
As you can see, we can write out any kind of html tag with this method so this concept can be used to display other markup, not just images. You could add links to each icon to aid deeper navigation.
Using The ImageTreeViewNode Class
private void RenderTree()
ImageTreeViewNode type1Node = new ImageTreeViewNode();
type1Node.Text = "I am an ImageTreeViewNode" ;
ListDictionary StatusIcons = new ListDictionary();
StatusIcons.Add("i am icon type 1", "icon1.png");
StatusIcons.Add("hi there, i am icon type 2", "icon2.png");
type1Node.StatusIcons = StatusIcons;
Using the ImageTreeViewNode is straightforward. We just create a new ImageTreeViewNode object, create a new ListDictionary to hold our icon data, and then pass the ListDictionary to the ImageTreeViewNode. Finally add our node to our TreeView control and we are all done.
Points of Interest
I hope you find this article of interest and that it gives you some insight as to how tweaking the functionality of the standard ASP.NET controls helps you solve real world problems. Thanks to http://strawbee.com/2005/11/06/tiny-little-icons/ for the free icons.
Jon Paul Davies
Senior ASP.NET Developer - Liverpool - UK