Customize the Skins of telerik rad treeview

2 posts, 0 answers
  1. Alok
    Alok avatar
    3 posts
    Member since:
    Feb 2014

    Posted 25 Feb 2014 Link to this post

    Hello Team,

    I am using telerik treeview with silk skin, but now my requirement is that i want to customize my treeview skin. i tried a lot on this but it dn't work. there are various problem which i facing and also mention my requirement:
    1: how can i hide the defaults dotted images.
    2: how can i remove the border width of node.
    3. Make Parents node in different colour.
    4. Change Colour on mouse over .

    I have attached the screen shot of demo which i want in my project and also attached the css of customize skin of treeview.
    Please help me out how can i solve my problem. 
  2. Magdalena
    Magdalena avatar
    413 posts

    Posted 27 Feb 2014 Link to this post

    Hello Alok,

    Straight to your qusetions:
    • hide dotted lines
      html .RadTreeView .rtLines .rtLI ,
      html .RadTreeView .rtLines .rtTop,
      html .RadTreeView .rtLines .rtMid,
      html .RadTreeView .rtLines .rtBot {
          background-image: none;

    • remove border width of nodes
      RadTreeView nodes have no border, so could you please specify what border to you mean? Could you please provide some screen shot?

    • Make parents node in different color
      You can add some custom class by the following JavaScript:
      var $ = $telerik.$;
      function pageLoad() {
          var tree = $find("<%= RadTreeView1.ClientID %>"),
              allNodes = tree.get_allNodes();
          for (var i = 0, nodesCount = allNodes.length; i < nodesCount ; i++) {
              var node = allNodes[i];
              if (node.get_nodes().get_count() === 0) {
                  var nodeElement = node.get_element();
      and apply the following CSS to change the color of nodes
      .RadTreeView_Silk .rtLI {
          color: red;
      .RadTreeView_Silk .noChild {
          color: green;
    • Change color on mouse over
      html .RadTreeView_Silk .rtHover .rtIn {
          color: blue;

    You can use these guidelines and examples as base to implement your business logic. Note that it is the responsibility of the developer working on the project and we cannot do this as a part of support services.

    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. DevCraft R3 2016 release webinar banner
Back to Top