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

Adding custom attributes and applying CSS to nodes in a TreeView control

, 4 Feb 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Extending the TreeView control to customize nodes and add custom attributes.

Sample image


This article will show how to extend the ASP.NET TreeView control to apply Cascading Style Sheets to tree nodes as well as add the functionality of storing custom attributes per node.


There are lots of useful make-life-easy functionalities that the built-in ASP.NET TreeView control lacks that are very noticeable especially when you are working with third party components. Functionalities like adding custom attributes or properties to a node other then the node text and Value, a built-in data binding supporting auto-binding from a single self-referencing table with ID -> Parent ID relation, and adding a custom style or template to nodes or globally to a tree view.

Attributes and node customization are addressed in this article, and hopefully I will address auto-binding in a later article or at least give it a try!

Customizing Tree Nodes

Since we are changing the way the System.Web.UI.WebControls.TreeNode Text property is being rendered, the first thing we need to do is to create a class that inherits TreeNode and override the RenderPreText and RenderPostText methods. In the RenderPreText method, we write out a Div tag and add a class attribute, setting its value with the cssClass property.

protected override void RenderPreText(HtmlTextWriter writer)
    writer.AddAttribute(HtmlTextWriterAttribute.Class, cssClass );

In the RenderPostText method, we end the Div tag.

protected override void RenderPostText(HtmlTextWriter writer)

Adding Custom Attributes

In a certain type of scenario, you many need to store data specific to nodes that the TreeNode class does not provide. You can store any number of attributes in the collection as name/value pairs using the NameValueCollection collection.

public NameValueCollection Attributes
        return this._Attributes;
        this._Attributes = value; 

Using the Code

private CustomTreeNode CreateNode(string NodeText, string NodeStyle)
    CustomTreeNode oNode = new CustomTreeNode();
    oNode.Text = NodeText;
    oNode.cssClass = NodeStyle;
    oNode.Attributes["CustomAttribute1"] = "1";
    oNode.Attributes["CustomAttribute2"] = "2";
    oNode.Attributes["CustomAttribute3"] = "3";
    return oNode;

Simple create an instance of the CustomTreeNode class and set the cssClass or Attributes properties if applicable. I also provide a recursive function in the demo application that loops through the tree and displays node text and its relative attributes.

Points of Interest

I hope you find this article interesting and simple. I want to thank Danny Chen for discussing node customization which I found very useful in writing this article.


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


About the Author

Bassam Saoud
Software Developer (Senior) Delcan Corporation
United States United States
Bassam Saoud is a software developer with more then 6+ years of experience. He has masters in Computer Science from American University of Technology and is currently doing Masters in Business Administration at Colorado Heights University. He started Programming with C++ and VB and now working with ASP.NET VB.NET/C#, SQL Server 2000/2005.
His interests are mainly politics, Basketball and Traveling.

Comments and Discussions

QuestionCan your way textend the winform treeview control? Pinmemberly_he12-Jan-12 17:13 
QuestionAttributes are not rendered in UI...are you missing something Pinmemberranu mandan25-Dec-11 20:20 
GeneralWith CSSFriendly Adapters Pinmemberdesignit993-Feb-09 4:33 
GeneralNice article, some suggestions maybe Pinmemberrayback_26-Feb-07 0:01 

hi it's a nice article, maybe some suggestions
1) Create your own TreeView (CustomTreeView ) something as below
public class CustomTreeView : TreeView
protected override TreeNode CreateNode()
return new CustomTreeNode(this, false);
//define DIV as a container
protected override HtmlTextWriterTag TagKey
return HtmlTextWriterTag.Div;
//override the basic style with your own
protected override Style CreateControlStyle()
return base.CreateControlStyle(ViewState);
//custom style class
public class CustomTreeStyle : Style
//your style properties and code goes here
Here we override the TagKey to render Div as a container, and also expose the strongly typed Style class (CustomTreeStyle), implementation of which I left out
2) You need to override the LoadViewState and SaveViewState of the treenode, so that the css is not lost at a postback (or any other property you add) as
protected virtual override void LoadViewState(Object savedState)
if (savedState != null)
object[] myState = (object[])savedState;
if (myState[0] != null)
if (myState[1] != null)
cssClass= (String)myState[1];
protected virtual override Object SaveViewState()
object baseState = base.SaveViewState();
object[] allStates = new object[2];
allStates[0] = baseState;
allStates[1] = cssClass;
return allStates;

Other than that, the article cites a good example , thanks.

GeneralRe: Nice article, some suggestions maybe PinmemberBassam Saoud6-Feb-07 1:32 

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
Web01 | 2.8.150302.1 | Last Updated 4 Feb 2007
Article Copyright 2007 by Bassam Saoud
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid