Home / Community & Support / Knowledge Base / RadControls for ASP.NET AJAX / TreeView / RadTreeView styling to look like RadPanelBar

RadTreeView styling to look like RadPanelBar

Article Info

Rating: Not rated

Article information

Article relates to

RadTreeView

Created by

Kamen Bundev, Telerik

Last modified

January 10, 2009

Last modified by

Kamen Bundev, Telerik

HOW TO
Style RadTreeView to look like RadPanelBar.

DESCRIPTION
RadTreeView can't be styled with CSS only like PanelBar, since it is missing an Expanded CSS class. I'll explain here how to use jQuery and CSS to do it.

SOLUTION
First we'll need the aforementioned CSS class. In order to set it, we will use the OnClientNodeExpanded and OnClientNodeCollapsed properties of RadTreeView. Set them to call a Javascript function. We also won't need The dotted lines between the nodes, so we'll switch them off.

<telerik:RadTreeView runat="server" EnableEmbeddedSkins="false" Skin="Gray" Width="192px"  
ShowLineImages="false" BorderStyle="Solid" BorderColor="#D0D0D0" BorderWidth="1px"  
OnClientNodeExpanded="nodeChanged" OnClientNodeCollapsed="nodeChanged">  

In the Javascript function we will use jQuery to toggle the rtExpanded class on the node:

<script language="javascript" type="text/javascript">  
    function nodeChanged(sender, eventArgs) {  
        $telerik.$(eventArgs.get_node().get_element()).toggleClass('rtExpanded');  
    }  
</script>  

Now we only need to style the RadTreeView to act like a PanelBar. We'll use the current Gray skin and modify it a little. I'm adding here the whole Gray RadTreeView skin, the additional classes are under the "RadPanelBar-like Level styling" comment:

/*
RadTreeView Telerik skin
*/ 
 
/* general styles */ 
 
.RadTreeView_Gray, 
.RadTreeView_Gray a.rtIn, 
.RadTreeView_Gray .rtEdit .rtIn input 
{ 
    font:11px tahoma,verdana,sans-serif; 
    color:#000; 
    line-height:1.273em; 
} 
 
.RadTreeView_Gray .rtTop,  
.RadTreeView_Gray .rtMid,  
.RadTreeView_Gray .rtBot 
{ 
    padding: 0 0 0 20px; 
} 
 
.RadTreeView_Gray .rtPlus,  
.RadTreeView_Gray .rtMinus 
{ 
    margin:4px 2px 0 -10px; 
    width:11px; 
    height:11px; 
} 
 
.RadTreeView_Gray .rtPlus 
{ 
    background: transparent url('TreeView/PlusMinus.gif') no-repeat 0 0; 
} 
 
.RadTreeView_Gray .rtMinus 
{ 
    background: transparent url('TreeView/PlusMinus.gif') no-repeat 0 -11px; 
} 
 
.RadTreeView_Gray .rtSp 
{ 
    height:18px; 
} 
 
.RadTreeView_Gray .rtChk 
{ 
    margin: 0 2px; 
    padding:0; 
    width:13px; 
    height:13px; 
} 
 
.RadTreeView_Gray .rtIn 
{ 
    margin-left:3px; 
    padding: 2px; 
} 
 
/* endof general styles */ 
 
 
/*Three state checkboxes*/ 
 
.RadTreeView_Gray .rtIndeterminate 
{ 
    background: transparent url(TreeView/TriState.gif) no-repeat 0 -26px; 
} 
 
.RadTreeView_Gray .rtChecked 
{ 
    background: transparent url(TreeView/TriState.gif) no-repeat 0 0; 
} 
 
.RadTreeView_Gray .rtUnchecked 
{ 
    background: transparent url(TreeView/TriState.gif) no-repeat 0 -13px ; 
} 
 
 
/* node states */ 
 
.RadTreeView_Gray .rtUL .rtUL .rtHover .rtIn 
{ 
    color: #000;  
} 
 
.RadTreeView_Gray .rtUL .rtHover .rtIn 
{ 
    color: #FFF;  
} 
 
.RadTreeView_Gray .rtSelected .rtIn 
{ 
    font-weight: bold; 
} 
 
.RadTreeView_Gray_disabled .rtIn, 
.RadTreeView_Gray .rtDisabled .rtIn 
{ 
    color:#ccc; 
} 
 
.RadTreeView_Gray .rtSelected .rtLoadingBelow 
{ 
    color: #000; 
} 
 
/* endof node states */ 
 
 
/* in-line editing */ 
 
.RadTreeView_Gray .rtLI .rtEdit .rtIn 
{ 
    border:1px solid black; 
    padding: 1px; 
    height:1.2em; 
    background: #fff; 
    text-decoration:none; 
} 
 
.RadTreeView_Gray .rtEdit .rtIn input 
{ 
    height:1em; 
    line-height:1em; 
    border:0; 
    margin:0; 
    padding:0; 
    background:transparent; 
} 
 
/* endof in-line editing */ 
 
 
/* drop targets */ 
 
.rtDropAbove_Gray, 
.rtDropBelow_Gray 
{ 
    border: 1px dotted black; 
    font-size: 3px; 
    line-height: 3px; 
    height: 3px; 
} 
 
.rtDropAbove_Gray 
{ 
    border-bottom: 0; 
} 
 
.rtDropBelow_Gray 
{ 
    border-top: 0; 
} 
 
/* endof drop targets */ 
 
 
/* node lines */ 
 
.RadTreeView_Gray .rtLines .rtLI, 
.RadTreeView_Gray .rtLines .rtFirst .rtUL 
{ 
    background:url('TreeView/NodeSpan.gif') repeat-y 0 0; 
} 
.RadTreeView_Gray_rtl .rtLines .rtLI, 
.RadTreeView_Gray_rtl .rtLines .rtFirst .rtUL 
{ 
    background:url('TreeView/NodeSpan_rtl.gif') repeat-y 100% 0; 
} 
 
.RadTreeView_Gray .rtLines .rtFirst 
{ 
    background:url('TreeView/FirstNodeSpan.gif') no-repeat 0 1.273em; 
} 
.RadTreeView_Gray_rtl .rtLines .rtFirst 
{ 
    background:url('TreeView/FirstNodeSpan_rtl.gif') no-repeat 100% 1.273em; 
} 
 
.RadTreeView_Gray .rtLines .rtFirst .rtUL 
{ 
    background:url('TreeView/FirstNodeSpan.gif') repeat-y 0 1.273em; 
} 
 
.RadTreeView_Gray_rtl .rtLines .rtFirst .rtUL 
{ 
    background:url('TreeView/FirstNodeSpan_rtl.gif') repeat-y 100% 1.273em; 
} 
 
.RadTreeView_Gray .rtLines .rtLast,  
.RadTreeView_Gray .rtLines .rtLast .rtUL 
{ 
    background:none; 
} 
 
.RadTreeView_Gray .rtLines .rtTop 
{ 
    background:url('TreeView/TopLine.gif') 0 0 no-repeat; 
} 
.RadTreeView_Gray_rtl .rtLines .rtTop 
{ 
    background:url('TreeView/TopLine_rtl.gif') 100% 0 no-repeat; 
} 
 
.RadTreeView_Gray .rtLines .rtLast .rtTop 
{ 
    background:url('TreeView/SingleLine.gif') 0 0 no-repeat; 
} 
 
.RadTreeView_Gray_rtl .rtLines .rtLast .rtTop 
{ 
    background:url('TreeView/SingleLine_rtl.gif') 100% 0 no-repeat; 
} 
 
.RadTreeView_Gray .rtLines .rtMid 
{ 
    background:url('TreeView/MiddleLine.gif') 0 0 no-repeat; 
} 
.RadTreeView_Gray_rtl .rtLines .rtMid 
{ 
    background:url('TreeView/MiddleLine_rtl.gif') 100% 0 no-repeat; 
} 
 
.RadTreeView_Gray .rtLines .rtBot 
{ 
    background:url('TreeView/BottomLine.gif') 0 0 no-repeat; 
} 
.RadTreeView_Gray_rtl .rtLines .rtBot 
{ 
    background:url('TreeView/BottomLine_rtl.gif') 100% 0 no-repeat; 
} 
 
/* endof node lines */ 
 
 
/* rtl-specific styles */ 
 
/* firefox */ 
.RadTreeView_Gray_rtl .rtPlus, 
.RadTreeView_Gray_rtl .rtMinus, 
x:-moz-any-link 
{ 
    margin-right:-11px; 
    rightright:-13px; 
} 
 
.RadTreeView_Gray_rtl .rtPlus, 
.RadTreeView_Gray_rtl .rtMinus, 
x:-moz-any-link, x:default 
{ 
    margin-right:0; 
    rightright:-18px; 
} 
 
* html .RadTreeView_Gray_rtl .rtPlus, 
* html .RadTreeView_Gray_rtl .rtMinus 
{ 
    margin-right:-18px; 
    rightright:0; 
} 
 
*+html .RadTreeView_Gray_rtl .rtPlus, 
*+html .RadTreeView_Gray_rtl .rtMinus 
{ 
    margin-right:-18px; 
    rightright:0; 
} 
 
.RadTreeView_Gray_rtl .rtTop, 
.RadTreeView_Gray_rtl .rtMid,  
.RadTreeView_Gray_rtl .rtBot 
{ 
    padding: 0 20px 2px 0; 
    margin:0; 
} 
 
/* endof rtl-specific styles */ 
 
 
/* hacks for Opera & Safari */ 
@media screen and (min-width:550px) 
{ 
    /* fixes for opera (changes the paddings/margins automatically in rtl mode) */ 
 
    html:first-child .RadTreeView_Gray_rtl .rtPlus, 
    html:first-child .RadTreeView_Gray_rtl .rtMinus, 
    html:first-child .RadTreeView_Gray_rtl .rtFirst .rtLI .rtPlus, 
    html:first-child .RadTreeView_Gray_rtl .rtFirst .rtLI .rtMinus 
    { 
        margin:4px 6px 0 -18px; 
        rightright:0; 
    } 
     
    /* fix for safari bug (inline-block positioned elements in rtl mode get no width) */ 
    :root .RadTreeView_Gray_rtl .rtPlus, 
    :root .RadTreeView_Gray_rtl .rtMinus 
    { 
        rightright: 0; 
        margin-right: -18px; 
        margin-left: 7px; 
    } 
} 
 
/* endof hacks */ 
.RadTreeView_Gray_designtime .rtPlus, 
.RadTreeView_Gray_designtime .rtMinus 
{ 
    left:3px; 
    top:4px; 
} 
 
 
/* RadPanelBar-like Level styling */ 
 
.RadTreeView_Gray .rtUL ul.rtUL 
{ 
    padding-left: 0; 
} 
 
.RadTreeView_Gray .rtUL .rtLI 
{ 
    overflow: hidden; 
    background-color: #676767; 
    color: #DDD; 
} 
 
.RadTreeView_Gray .rtUL .rtExpanded 
{ 
    background-color: #888; 
} 
 
.RadTreeView_Gray .rtUL ul.rtUL .rtTop, 
.RadTreeView_Gray .rtUL ul.rtUL .rtMid, 
.RadTreeView_Gray .rtUL ul.rtUL .rtBot 
{ 
    border-bottom: 1px solid #CCC; 
} 
 
.RadTreeView_Gray .rtUL ul.rtUL .rtUL .rtTop, 
.RadTreeView_Gray .rtUL ul.rtUL .rtUL .rtMid, 
.RadTreeView_Gray .rtUL ul.rtUL .rtUL .rtBot 
{ 
    border: 0; 
} 
 
.RadTreeView_Gray .rtUL .rtUL, 
.RadTreeView_Gray .rtLines .rtLast .rtUL, 
.RadTreeView_Gray .rtLines .rtFirst .rtUL, 
.RadTreeView_Gray .rtUL .rtUL .rtLI 
{ 
    background-color: #EEE; 
    color: #444; 
} 
 
.RadTreeView_Gray .rtUL .rtUL .rtExpanded 
{ 
    background-color: #FFF; 
} 
 
.RadTreeView_Gray .rtUL .rtUL .rtUL, 
.RadTreeView_Gray .rtLines .rtLast .rtUL .rtUL, 
.RadTreeView_Gray .rtLines .rtFirst .rtUL .rtUL, 
.RadTreeView_Gray .rtUL .rtUL .rtUL .rtLI 
{ 
    background-color: #FFF; 
} 
 
.RadTreeView_Gray .rtUL ul.rtUL .rtUL 
{ 
    margin-left: -10px; 
    padding-left: 20px; 
} 
 
.RadTreeView_Gray .rtUL .rtUL rtMid 
{ 
    border-bottom: 1px solid #CCC; 
} 

That's all, your RadTreeView looks and acts like a RadPanelBar now.

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.