OBOUT - ASP.NET TreeView

ASP.NET TreeView - CSS Tutorial

Open CSS file in Notepad. Feel free to edit.

CSS file obout_treeview2.css is located according property FolderStyle
Example: oTree.FolderStyle = "tree2/style/MSDN"

If property FolderStyle is not set, default location is 'tree2/icons/obout_treeview2.css'.

Border

Border around the TreeView can be set using ob_tree class in the style sheet.

Example:

    /* for div where treeview is placed */
    div.ob_tree {
        border: 1px solid #999999;

Background color

Background color can be set using ob_tree class in the style sheet.

    /* for div where treeview is placed */
    div.ob_tree {
        background-color: #eeeeee;

TIP: Also set border color for nodes. See Font, class ob_t2.

Background image

Background image can be set using ob_tree class in the style sheet.

    /* for div where treeview is placed */
    div.ob_tree {
        background-image: url('../images/wheat.jpg');

Scrollbars

Scrollbars can be set using ob_tree class.

Use one of these values:
visible - No scrollbars (useful when treeview is in frame).
scroll - Always show scrollbars.
auto - Show scrollbars where necessary (horizontal or vertical or both).

/* for div where treeview is placed */
    div.ob_tree {
        overflow: auto;
        height: 500px;
        width: 250px;
        
        height: 100%;
        width: 100%;

Note that it is mandatory to set the property Height when creating the TreeView (for example, oTree.Height = "100px";) for the scrollbar to be displayed.
For IE you can also use separate overflow-X and overflow-Y (not in Mozilla).
Also see how to add horizontal scrollbar using property Width_ScrollWider.
How to prevent Line Breaking.

Node highlighting

For highlighted node style, change ob_t3 class.

    /* for node text highlighted/selected */
    td.ob_t3 {
        border:1px solid red;
        background-color:gold;

Nodes Text font, border, background, cursor

To set font, change font in two CSS classes: ob_t2 and ob_t3

    /* for node text */
    td.ob_t2 {
        font: 8pt Courier;
        border: 1px solid transparent;
        cursor: default;

    /* for node text highlighted/selected */
    td.ob_t3 {
        font: 8pt Courier;
        border: 1px solid red;
        cursor: default;

Links

If you have links in nodes, set two CSS classes: ob_t2 A and ob_t3 A

    /* links in all nodes */
    td.ob_t2 A {
        color: #3366cc;

    /* link in selected node */
    td.ob_t3 A {
        color: crimson;

For mouseover (hover) effect on links add these classes:

    /* links in all nodes */
    td.ob_t2 A:hover {
        color: #3366cc;
        text-decoration: underline;

    /* link in selected node */
    td.ob_t3 A:hover {
        color: crimson;
        text-decoration: underline;

Icons hide/show

To not show the icons, set oTree.ShowIcons = false

Another way to hide icons using CSS class td.ob_t4
    /* for icons */

    td.ob_t4 {
        display:none;

    To show images set

    td.ob_t4 {
        display:block;

Distance between vertical lines

To set the distance between vertical dotted lines (as shown on the image to the right), change width in ob_d5 CSS class.

    /* for vertical lines (indent) */
    div.ob_d5 {
        width: 10px;

Distance between icons and text

To change distance between icons and text, change width in ob_d4 CSS class.

    /* for icons */
    div.ob_d4 {
        width: 31px;
        font: 6pt Tahoma;

Plus-Minus images

If you make custom Plus-Minus images, change width in ob_t6 CSS class.

    /* for plus-minus images */
    td.ob_t6 {
        width: 16px;
        
If you want to hide
        display: none;

Plus-Minus images for the Root Node

To show/hide the plus/minus images for the root node, change the display in the td.ob_t8 CSS class.

    /* for plus-minus images of the root node* */
    td.ob_t8 {
        width: 16px;
        vertical-align: top;
        display: block;        
        }

Vertical spacing

To change vertical space between nodes, add height: [value] to ob_t2 and ob_t3 CSS classes.

    /* for node text */
    td.ob_t2 {
        height:20px;


    /* for node text highlighted/selected */
    td.ob_t3 {
        height:20px;

"Loading..." message

For dynamic loading: To change style of the "Loading..." message, modify ob_t7 CSS class.

Example:

    /* for message "Loading ..." */
    td.ob_t7 {
        font:8pt Tahoma;
        background-color:#ffffff;
        border:1px solid #666666; 
        color:#666666;
        width:80px;
        text-align:center;
        padding-left:20px;