Change look and feel of RadTreeView Ajax

[Amrish Shah]

Hi,
        I want to change expand collapse button shown with tree and also line joining parent node and child node is shown as solid, i want to show it as dotted. Can i do it as i have source code of control?

[Simon]

Hi Amrish Shah,

Yes, you can change the Images of the TreeView.

First, you need to copy the existing Images and the CSS file of the currently used skin to a new folder.

Second, edit the Images as required. It is advisable not to resize them (e.g. for the solid line Images you could only make the lines dotted).

Finally, if you need to resize the Plus and Minus Images, adjustment of the CSS for these Images may be required. The following CSS selectors located in the skin CSS file define the styles which attributes' values should be adjusted: .RadTreeView_[SkinName] .rtPlus and .RadTreeView_[SkinName] .rtMinus.

Regards,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Loïs]

Hello,

I have a problem with the RadTreeView component: I want to resize the plus and minus images to 16x16, and so I've made a custom skin, following the documentation tutorial, containing theses lines:

.RadTreeView_MySkin .rtPlus,
.RadTreeView_MySkin .rtMinus
{
    background-image: url('<path to my images>/TreeView/PlusMinus.png');
    width:16px;
    height:16px;
}

.RadTreeView_MySkin .rtLI .rtPlus,
.RadTreeView_MySkin .rtLI .rtPlus:hover
{ background-position: 0 0; }

.RadTreeView_MySkin .rtLI .rtMinus,
.RadTreeView_MySkin .rtLI .rtMinus:hover
{ background-position: 0 -16px; }

The image gets applied but the sizing doesn't, and when I check in IE developer toolbar the width and height gets overriden by the default skin (WebResource.axd).

Is this a bug ? Or did I miss something ?

[Plamen]

Hi Lois,

 
You can try to add the "!important" to the width and the hight as in the code below in order to prevent their overriding by other styles as in the code below:

width:16px !important;
  height:16px !important;

Hope this will help you.

Regards,
Plamen Zdravkov
the Telerik team

[Loïs]

Thanks, it solved that precise problem, but the node text now gets aligned "middle" vertically, which is not really nice... but changing the vertical-align on rtSp, rtPlus and rtMinus seems to cause other problems.
So I think I'll stick to the default size for now...