New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Node Style

  •   Most Visited
  •   Latest Post
  •   Most Replies
  • Community Forums
    • Desktop Technologies
      • 2007 Microsoft Office System
      • Microsoft Office 2003
      • Microsoft Office XP
    • Web Technologies
      • ASP.NET
        • General ASP.NET
        • ASP.NET AJAX
        • Advanced ASP.NET
        • Source Projects
      • Silverlight
With RadTreeView you can customize the look and feel of each single TreeNode.

The TreeNodes expose the following properties that can be used to apply certain CSS classes to the nodes:

CssClass
DisabledCssClass
HoveredCssClass
SelectedCssClass

Each of the above properties determines the CSS class to be applied to the TreeNode when it is in the respective mode (normal, disabled, hovered and selected).

This example shows how to use the CssClass properties of the nodes to make them look unique.
  • DefaultCS.aspx
  • Styles.css
<%@ Page AutoEventWireup="true" Language="c#"  Inherits="Telerik.QuickStart.QsfPage" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <div class="bigModule">
            <div class="bigModuleBottom">
                <ul style="margin-top: 0; list-style: none">
                    <li style="float: left; margin-right: 30px;"><span style="width: 20px; margin-right: 5px; background: #93b45c; display: block; border: solid 1px #5c5c5c; float: left">&nbsp;</span>
                        Most Visited
                    </li>
                    <li style="float: left; margin-right: 30px;"><span style="width: 20px; margin-right: 5px; background: #c25a51; display: block; border: solid 1px #5c5c5c; float: left">&nbsp;</span>
                        Latest Post
                    </li>
                    <li>
                        <span style="width: 20px; background: #4f84bf; display: block; margin-right: 5px; border: solid 1px #5c5c5c; float: left">&nbsp;</span> Most Replies
                    </li>
                </ul>
            </div>
        </div>
        <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView1" >
            <Nodes>
                <telerik:RadTreeNode Text="Community Forums" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="Desktop Technologies" Expanded="true">
                            <Nodes>
                                <telerik:RadTreeNode Text="2007 Microsoft Office System" CssClass="latestPost">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Microsoft Office 2003" CssClass="mostVisited">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Microsoft Office XP" CssClass="mostReplies">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Web Technologies" Expanded="true">
                            <Nodes>
                                <telerik:RadTreeNode Text="ASP.NET" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode Text="General ASP.NET" CssClass="mostVisited">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode Text="ASP.NET AJAX" CssClass="latesPost">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode Text="Advanced ASP.NET" CssClass="mostReplies">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode Text="Source Projects">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Silverlight" CssClass="latestPost">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance