Click here to Skip to main content
13,343,328 members (55,663 online)
Click here to Skip to main content
Add your own
alternative version


38 bookmarked
Posted 6 May 2006

Displaying Multiple Images In The ASP.NET TreeView Control

, 6 May 2006
Rate this:
Please Sign up or sign in to vote.
Extending the Treeview control to display status icons


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 System.Web.UI.Webcontrols.TreeNode so our new ImageTreeViewNode node type is based on that. By inheriting from TreeNode 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 ImageTreeViewNode to know which icons to dispay.
private ListDictionary m_StatusIcons;
     public ListDictionary StatusIcons
             return m_StatusIcons;

             m_StatusIcons = value;
I chose to go with a System.Collections.Specialized.ListDictionary 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 RenderPostText method. The RenderPostText method allows you to add html tags onto the end of each displayed node. As you might expect, there is also a RenderPretext 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);
                 writer.AddAttribute("alt", statusIcon.Key.ToString());
                 writer.AddAttribute("title", statusIcon.Key.ToString());

First we check if our StatusIcons collection contains icons, and if it does, we iterate through each item and extract it's key and value. We use the HtmlTextWriter provided by the RenderPostText method to write out an img tag that contains the attributes to display our icon. src is the location of the icon file on our server, and alt and title 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 for the free icons.

Jon Paul Davies
Senior ASP.NET Developer - Liverpool - UK



This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Jon Paul Davies
Web Developer
United States United States
I'm an experienced senior software developer based in Liverpool UK currently working with Microsoft web development technologies.

You may also be interested in...


Comments and Discussions

Questionquestion Pin
Member 1033259326-Aug-15 11:12
memberMember 1033259326-Aug-15 11:12 
QuestionIs it possible do something similar to add tooltips to the checkbox? Pin
danigeraleddin15-Jul-14 11:03
memberdanigeraleddin15-Jul-14 11:03 
GeneralEvents Pin
vikranthkatta14-Jul-13 22:06
membervikranthkatta14-Jul-13 22:06 
GeneralThank you. Pin
chkk822-Jan-12 20:50
memberchkk822-Jan-12 20:50 
GeneralGreat!!! it worked for me very well. thank you. Pin
Tami Karmon12-Jul-10 0:08
memberTami Karmon12-Jul-10 0:08 
GeneralOrdering issue Pin
gnl7410-Feb-10 0:52
membergnl7410-Feb-10 0:52 
QuestionCan we add webcontrol(like Image button) at the end of the node like you added image. Pin
DotnetShankar30-Nov-08 17:35
memberDotnetShankar30-Nov-08 17:35 
Generalanswers Pin
Member 455066912-Dec-07 22:37
memberMember 455066912-Dec-07 22:37 translations Pin
Thanks for all the fish15-May-07 10:25
memberThanks for all the fish15-May-07 10:25 
GeneralRe: translations Pin
Jon Paul Davies16-May-07 0:23
memberJon Paul Davies16-May-07 0:23 
QuestionAlign icons to the right? Pin
ukluk26-Feb-07 15:19
memberukluk26-Feb-07 15:19 
AnswerRe: Align icons to the right? Pin
MrHoSo10-Apr-07 15:54
memberMrHoSo10-Apr-07 15:54 
GeneralRe: Align icons to the right? [modified] Pin
Anand Mahajan13-May-08 19:55
memberAnand Mahajan13-May-08 19:55 
GeneralRender links Pin
mdfa21-Jul-06 4:24
membermdfa21-Jul-06 4:24 
GeneralRe: Render links Pin
richerm27-Oct-06 6:54
memberricherm27-Oct-06 6:54 
GeneralSelectedNodeChanged Disappearing Icons [modified] Pin
Crispr1-Jun-06 5:11
memberCrispr1-Jun-06 5:11 
GeneralRe: SelectedNodeChanged Disappearing Icons [modified] Pin
Jon Paul Davies2-Jun-06 0:06
memberJon Paul Davies2-Jun-06 0:06 
GeneralRe: SelectedNodeChanged Disappearing Icons Pin
louislei22-Feb-07 0:18
memberlouislei22-Feb-07 0:18 
Generalmultiple icons in winform TreeView Pin
jekata9-May-06 19:33
memberjekata9-May-06 19:33 
GeneralRe: multiple icons in winform TreeView Pin
Jon Paul Davies10-May-06 0:28
memberJon Paul Davies10-May-06 0:28 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 6 May 2006
Article Copyright 2006 by Jon Paul Davies
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid