This is a migrated thread and some comments may be shown as answers.

Change look and feel of RadTreeView Ajax

4 Answers 75 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Amrish Shah
Top achievements
Rank 1
Amrish Shah asked on 13 Jun 2008, 06:44 AM
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?

4 Answers, 1 is accepted

Sort by
0
Simon
Telerik team
answered on 16 Jun 2008, 07:47 AM
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
0
Loïs
Top achievements
Rank 2
answered on 07 May 2012, 09:30 AM
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 ?
0
Plamen
Telerik team
answered on 10 May 2012, 10:09 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Loïs
Top achievements
Rank 2
answered on 11 May 2012, 12:05 PM
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...
Tags
TreeView
Asked by
Amrish Shah
Top achievements
Rank 1
Answers by
Simon
Telerik team
Loïs
Top achievements
Rank 2
Plamen
Telerik team
Share this question
or