Controlling RadTreeView scrollbars' visual appearance

Article information
Article relates to	Web.UI 2007.3 1314 or RadTreeView 6.3.3.0
Created by	Telerik
Last modified	February 21, 2008
Last modified by	Simon, Telerik

PROBLEM
Controlling RadTreeView scrollbars' visual appearance.

SOLUTION

Note: This solution is applicable to both versions of RadTreeView.

You can easily customize the appearance of RadTreeView's scrollbars using CSS. If you do not want end-users to see scrollbars at all, you can simply skip setting the Height / Width attributes of the TreeView. If you do need to set Width / Height but still want no scrollbars, you can use the overflow CSS property (***).


<radt:RadTreeView runat="server" style="overflow: hidden" ... />

In Internet Explorer you can also control the overflow for vertical / horizontal scrollbars using overflow-x / overflow-y, e.g.

<radt:RadTreeView runat="server" style="overflow-x: hidden; overflow-y: hidden" ... />

You can also control the visual appearance of the scrollbars using the scrollbar based Css attributes (here's a partial list of scrollbar related attribute)

scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color

e.g.

<radt:RadTreeView runat="server" style="scrollbar-arrow-color: red" ... />


(***) You can set all of the styles mentioned so far either inline, to the RadTreeView tag as already shown, or through a CSS selector.

The CSS selector is different for RadTreeView 6.3.3.0 and its AJAX counterpart:

Note: the "!important" suffix is required to override the default style applied to the DIV element in both cases .