ASP.NET TreeView - Customizing Look And Feel

This tutorial shows how to override existing style or creating new style for OboutTree control.

Sample files

See CustomizingStyles Sample to download and build the sample files discussed in this tutorial.

Overriding Existing Styles

Use the properties, 'NodeStyle','RootNodeStyle' and 'LeafNodeStyle' of the control to customize the existing style.

.nodeCSS
{
    color:Green;
}

.hoverNodeCSS
 {
        font-weight:bold;
 }

.selectedNodeCSS
 {
      color:Red;
 }

.nodeContainerCSS
 {
       background-color:Yellow;
 }

<obout:Tree ID="OboutTree1" runat="server" Width="200px" CssClass="vista">
    <NodeStyle NodeCSS="nodeCSS" HoveredNodeCSS="hoverNodeCSS" SelectedNodeCSS="selectedNodeCSS"
        SubNodeContainerCSS="nodeContainerCSS" />
        <Nodes>
            <obout:Node Expanded="True" Text="Root Node">
                <obout:Node Expanded="True" Text="Parent Node">
                    <obout:Node Expanded="True" Text="Leaf Node">
                    </obout:Node>
                </obout:Node>
            </obout:Node>
        </Nodes>
</obout:Tree>
            

Creating New Styles

The control is segmented into distinct levels for which the CSS styles can be set.

The control has a root container div element which can be used to set the css style for the control. Also each TreeNode consist of two sections named as 'NodeContainer Div' and 'ChildNodeContainer UL'.The below table lists the segments and their corresponding CSS properties whose settings affect their styles.

 <style type="text/css">
        .customStyle
        {
            background-color: #343434;
            font-family: Tahoma;
            font-size: 11px;
            overflow: auto;
            white-space: nowrap;
        }
        .customStyle .obUl, .default .obLi
        {
            margin: 0px;
            padding: 0px;
        }
        .customStyle .obLi
        {
            list-style: none outside none;
            background: none repeat scroll 0 0 transparent;
        }
        .customStyle .line .obLi .node
        {
            padding-left: 19px;
        }
        .customStyle .node *
        {
            vertical-align: middle;
        }
        .customStyle .obUl .obLi .obUl
        {
            padding-left: 19px;
            display: none;
        }
        .customStyle .ic
        {
            display: inline-block;
            height: 20px;
            width: 19px;
            background-repeat: no-repeat;
            font-size: 1px;
            cursor: pointer;
        }
        .customStyle .line .ic
        {
            margin-left: -19px;
        }
        .customStyle .node
        {
            color: White;
        }
        .customStyle .subnode
        {
            padding-left: 19px;
        }
        .customStyle .col
        {
            background-image: url( 'images/plus.jpg' );
            height: 20px;
            width: 19px;
        }
        .customStyle .exp   
        {
            background-image: url( 'images/minus.jpg' );
            height: 20px;
            width: 19px;
        }
        .customStyle .empty
        {
            height: 20px;
            width: 19px;
        }
        
        /* for dragging */
        .drag
        {
            z-index: 9999;
            margin-left: 10px;
            margin-top: 10px;
            position: absolute;
            font-size: 8pt;
            font-family: Tahoma;
            overflow: hidden;
        }

        /* style of node text under drag (it can be missed) */
        .customStyle .dragNode .textcon
        {
            color:#0000FF;
            background-color: #CCDDEE;
            border: 1px solid #6699CC;
            padding: 0px 3px;
        }
</style>