Change look and feel of RadTreeView Ajax

5 posts, 0 answers
  1. Amrish Shah
    Amrish Shah avatar
    2 posts
    Member since:
    May 2008

    Posted 13 Jun 2008 Link to this post

            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?
  2. Simon
    Simon avatar
    2281 posts

    Posted 16 Jun 2008 Link to this post

    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.

    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Telerik UI for ASP.NET Core is out
  4. Loïs
    Loïs avatar
    4 posts
    Member since:
    Apr 2012

    Posted 07 May 2012 Link to this post


    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');
    .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 ?
  5. Plamen
    Plamen avatar
    2725 posts

    Posted 10 May 2012 Link to this post

    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.

    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.
  6. Loïs
    Loïs avatar
    4 posts
    Member since:
    Apr 2012

    Posted 11 May 2012 Link to this post

    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...
Back to Top