Displaying Multiple Images In The ASP.NET TreeView Control

Download demo project - 9 Kb

Introduction

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.

Background

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
        {
            get
            {
                return m_StatusIcons;
            }

            set
            {
                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());
                    writer.RenderBeginTag(HtmlTextWriterTag.Img);
                    writer.RenderEndTag();

                }
            }
            base.RenderPostText(writer);
        }

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;

    TreeView1.Nodes.Add(type1Node);    

}

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
http://www.j-dee.com/

History

License

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