Edit this page

Migrating Skins

Below is a comparison table between the rendering of RadTreeView "Classic" and RadTreeView for ASP.NET AJAX.

RadTreeView "Classic" RadTreeView for ASP.NET AJAX
<div> <div class="RadTreeView RadTreeView_Default">
<div> <ul class="rtUL rtLines">
<div> <li class="rtLI rtFirst">
<img class="11" src="TopMinus.gif" /> <div class="rtTop">
<span class="TreeNode">Root</span> <span class="rtSp"></span>
</div> <span class="rtMinus"></span>
<div> <span class="rtIn">Root</span>
<div> </div>
<img class="4" src="MiddleLine.gif" /> <ul class="rtUL">
<img class="3" src="MiddleCrossLine.gif" /> <li class="rtLI">
<span class="TreeNode">A</span> <div class="rtTop">
</div> <span class="rtSp"></span>
<div> <span class="rtIn">A</span>
<img class="4" src="MiddleLine.gif" /> </div>
<img class="3" src="MiddleCrossLine.gif" /> </li>
<span class="TreeNode">B</span> <li class="rtLI">
</div> <div class="rtMid rtSelected">
<div> <span class="rtSp"></span>
<img class="4" src="MiddleLine.gif" /> <span class="rtIn">B</span>
<img class="3" src="MiddleCrossLine.gif" /> </div>
<span class="TreeNode">C</span> </li>
</div> <li class="rtLI rtLast">
</div> <div class="rtBot">
<div> <span class="rtSp"></span>
<img class="0" src="BottomLine.gif" /> <span class="rtIn">C</span>
<span class="TreeNode">Sibling</span> </div>
</div> </li>
</div> </ul>
</div> </li>
<li class="rtLI rtLast">
<div class="rtBot">
<span class="rtSp"></span>
<span class="rtIn">Sibling</span>


As you probably would notice, RadTreeView for ASP.NET AJAX has a much more flexible HTML structure, allowing advanced styling.

The line images in RadTreeView for ASP.NET AJAX are rendered as background images of different elements; it is recommended to copy the declarations and the images from an existing skin that resembles the skin you are migrating. If you wish to to create the images on your own, you could use the following CSS rules:

.RadTreeView_{SkinName} .rtLines .rtLI,
.RadTreeView_{SkinName} .rtLines .rtFirst .rtUL
   background:url(NodeSpan.gif) repeat-y 0 0;
.RadTreeView_{SkinName} .rtLines .rtFirst
   background:url(FirstNodeSpan.gif) no-repeat 0 15px;
.RadTreeView_{SkinName} .rtLines .rtFirst .rtUL
   background:url(FirstNodeSpan.gif) repeat-y 0 15px;
.RadTreeView_{SkinName} .rtLines .rtLast,
.RadTreeView_{SkinName} .rtLines .rtLast .rtUL
.RadTreeView_{SkinName} .rtLines .rtTop
   background:url(TopLine.gif) 0 0 no-repeat;
.RadTreeView_{SkinName} .rtLines .rtLast .rtTop
   background:url(SingleLine.gif) 0 0 no-repeat;
.RadTreeView_{SkinName} .rtLines .rtMid
   background:url(MiddleLine.gif) 0 0 no-repeat;
.RadTreeView_{SkinName} .rtLines .rtBot
   background:url(BottomLine.gif) 0 0 no-repeat;


The table below shows the mapping between the different class names in RadTreeView "Classic" and RadTreeView for ASP.NET AJAX:

RadTreeView "Classic" RadTreeView for ASP.NET AJAX
.TreeNode .rtIn
.TreeNodeOver .rtHover .rtIn
.TreeNodeSelect .rtSelected .rtIn
.TreeNodeDisabled .rtDisabled .rtIn
.TreeNodeEdit .rtEdit .rtIn
.LoadingMessage .rtLoadingBefore, .rtLoadingAfter, .rtLoadingBelow
.TreeContextItem .rmContextMenu .rmLink (See note below)
.TreeContextItemOver .rmContextMenu .rmLink:hover (See note below)

RadTreeView for ASP.NET AJAX uses RadMenu as its Context Menu; therefore, the styling from the RadMenu skin is applied and the prefix should be RadMenu_{SkinName}.
To make the skin selectors skin-specific, they should be prefixed with RadTreeView_{SkinName}.