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;
border image
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 color
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');
background image
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.
scrollbars
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;
node highlighting
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;
        
font
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;
font
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;
icons
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 vertical lines
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;

distance between icons and text
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
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;        
        }
        
Plus-Minus images for the Root Node
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;

Vertical spacing
"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;
    
Loading... message
obout.com
obout.com Home
News
TreeView Home
TreeView Home
Download
Site Map
Examples 
Styles
Classic
Classic
Dynamic Loading
No Icons
Black
Black No Icons
Background image
Premiere New
black
blue
green
red
violet
yellow
Explorer
Gray
Help
HelpPlus
MSDN
TMenu
TMenu (small icons)
Vista New
Web
White
XPBlue
Win2003
Right To Left
Features
Drag and drop - 18
Drag-n-Drop
Custom
Multi-node
Dragging with children
Drop in textboxes
External D'n'D
Move nodes 1
Renumber nodes
Auto Scrolling
Copy / Move nodes
D'n'd and Dynamic Loading
Drop in listboxes
Drop in listboxes 2
Restrict Levels
D'n'D with various options
Disable dropping in two trees
Not-allowed Icon New
Sort after D'n'D New
Dynamic loading - 6
Web style
MSDN style
Deep tree
Reload subtrees
Loading trees partially
Virtual Scrolling New
Add/remove nodes - 4
Add/remove on client-side
Alphabetical order
Add to dynamic subtrees
Remove all children
Edit nodes - 4
Edit nodes
Nodes with Checkboxes
Sort after Edit New
Select nodes - 3
Find selected node
Select multiple nodes
Highlight parent
Layout - 2
Width, height and scrollbars
Root node
TreeView state - 3
Dynamic
Keep expanded
Keep collapsed
File system - 3
Show file system
File system loading
File system manager
Additional data for each node - 3
Details
On client side
Image viewer
Expand/collapse nodes - 2
By level
Single folder
Multiple trees - 4
Two Trees
Two Trees custom
Two Trees enhancement
Move Nodes BTWN Trees New
Different Styles New
Validation - 2
D-n-d on server
Edit on server
Integration - 14
With a context menu
Attach Easy Menu
Attach menu on-demand
Attach to dynamic nodes
Attach menu to icons
Change icons
With Flyout
With Splitter
MS AJAX
With checkboxes
Dynamic checkboxes
With a Combobox
With modal dialog
Outlook Slide Menu
With Tab Strip
Build from SiteMap
Customization - 7
Icons for treeview
Aligned columns
CSS Tutorial
Hover node effect
Multi-Level Slide Menu
Select on Collapse
From Dennis
From/To XML file
Keyboard navigation
Search nodes
Client-side events
Knowledge Base - 1
Knowledge Base
Documentation
Method Add
Server-Side
Client-Side
Client-Side Events
XML
Methods
XML Tutorial
Client-Side Tutorial
Tutorial 1
Tutorial 2
Tutorial 3
Tutorial 4
Events
Tutorial
Event handlers
Tutorials
Using the correct path
Improving performance
In a user control
AutoPostBack with various options
Open in Search pane
Move nodes by clicking a button
Postback on node select
Switch icons