Edit this page

Controlling Appearance

There are a number of ways you can customize the look & feel of your RadTreeView control.

Dimensions

To change the basic dimensions of the RadTreeView:

  • Use the Height property to control the height of the TreeView. If you do not set Height, the TreeView list sizes itself automatically based on the number of items in the list. If the value of Height is too small to display all of the items in the list, a vertical scroll bar appears.

  • Set the Width property to specify the width of the input area of the control.
    RadTreeView Controlling Appearance

Look and Feel

  • To change the overall look and feel of the RadTreeView, set the Skin property.

  • To change the way the Nodes expand and collapse, use Animation.

  • To change the look of an individual item in RadTreeView, use the CssClass property and set up the CSS styles as needed.

  • To provide a right-to-left look and feel, set the attribute of the page HTML or set the dir attribute within a div tag.

  • To toggle the display of lines connecting Nodes, use the ShowLineImages property.

Changing the font size

To adjust the font sizes of all items in RadTreeView, you should use the following CSS rule:

.RadTreeView,
.RadTreeView a.rtIn,
.RadTreeView .rtEdit .rtIn input
{
   font-size:14px;
}           

The declaration above increases the font size by 3px (since the default font size of RadTreeView is 11px).

Changing the spacing between tree Nodes

To change the space between RadTreeView Nodes, you should use the following CSS rules:

.RadTreeView .rtLI 
{
    padding-bottom: 10px;
}
.RadTreeView .rtUL .rtUL 
{
    margin-top: 10px;
}
.RadTreeView .rtLast 
{
    padding-bottom: 0; /* prevent double-spacing */
}           

The declaration above adds a 10px space between the Nodes.

Changing the Node lines

The Node lines of RadTreeView can be adjusted by modifying the following lines:

.RadTreeView .rtLines .rtLI
{
   background:url('TreeView/NodeSpan.gif') repeat-y 0 0;
}
.RadTreeView .rtLines .rtFirst
{
   background:url('TreeView/FirstNodeSpan.gif') no-repeat 0 1.273em;
}
.RadTreeView .rtLines .rtLast,
.RadTreeView .rtLines .rtLast .rtUL
{
   background:none;
}
.RadTreeView .rtLines .rtTop
{
   background:url('TreeView/TopLine.gif') 0 0 no-repeat;
}
.RadTreeView .rtLines .rtLast .rtTop
{
   background:url('TreeView/SingleLine.gif') 0 0 no-repeat;
}
.RadTreeView .rtLines .rtMid
{
   background:url('TreeView/MiddleLine.gif') 0 0 no-repeat;
}
.RadTreeView .rtLines .rtBot
{
   background:url('TreeView/BottomLine.gif') 0 0 no-repeat;
}       

The images, referenced by this CSS, have the following meaning:

Image file name Purpose of image
TopLineMiddleLineBottomLine The images for first item, for items between the first and the last, and for the last item.Their role is to add the line before each tree Node.
SingleLine This image has the same role as the images, described above. Used only when there is only one root item (therefore no sibling Nodes and should be rendered differently)
FirstNodeFirstNodeSpan Images, containing only vertical lines. Please note the difference, that FirstNodeSpan contains a very high image that is needed for the proper rendering of RadTreeView.

It is advised to copy the line images from an existing skin and modify them, which will reduce image modification problems to a minimum.

See Also