how to change treeview style?

6 posts, 1 answers
  1. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2010 Link to this post

    I am looking to change style for treeview which has office 2007, the matter is that I wanna change the expand/collapse button (the small + or - sign) to something triangle shape (as windows 7 skin), so how to do that?

    and I want when I click to child root, the parent root should be highlighted in same effect as child...

    he is how the changing should be (I have drawn then in photoshop):
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Aug 2010 Link to this post

    Hello Khaled,


    By using following CSS, you can change the images for expand/collapse.
    Style:
    <style type="text/css">
        .rtPlus
        {
            background-image: url('../Images/Cancel.gif') !important;
            background-position: 0px 0px !important;
        }
        .rtMinus
        {
            background-image: url('../Images/Edit.gif') !important;
            background-position: 0px 0px !important;
        }
    </style>

    And to hightlight the parent node, use the following client code.
    client code:
    <script type="text/javascript">
        function OnClientNodeClicked(sender, args) {
            var node = args.get_node();
            if (node.get_level() != 0) {
                var parentNode = node.get_parent();
                parentNode.highlight();
            }
        }
    </script>


    Thanks,
    Princy.
  3. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 16 Aug 2010 Link to this post

    thanks very much,

    when I select a child I get the highlight, but if I move to another child from another root, I got a problem here, because the old root is kept selected, I need to get the all the elements of tree and deselect them one by one, a better solution is that if I can save the selected root in hidden input tag, would be really better for browser and faster, and less processing...
    kindly, see the first image

    one more thing is that, I wanna same triangle of windows 7, I can get it from firebug, but how may I use it?
    kindly, see the other image
  4. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Aug 2010 Link to this post

    Hello Khaled,

    Use these CSS and javascript instead:
    <style type="text/css">
        div.RadTreeView .rtPlus,
        div.RadTreeView .rtPlus:hover,
        div.RadTreeView .rtPlusHover,
        div.RadTreeView .rtMinus,
        div.RadTreeView .rtMinus:hover,
        div.RadTreeView .rtMinusHover
        {
            background-image: url('images/PlusMinus.png');
        }
    </style>


    <script type="text/javascript">
        function OnClientNodeClicked(sender, args) {
            $telerik.$('.rtSelected', sender.get_element()).removeClass('rtSelected');
            for (var node = args.get_node(); node._parent && node.get_level() >= 0; node = node.get_parent())
                $telerik.$(node.get_contentElement()).addClass('rtSelected');
        }
    </script>


    I'm attaching the Windows7 plus/minus image sprite which should go in images/

    Regards,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Ali
    Ali avatar
    4 posts
    Member since:
    Dec 2010

    Posted 14 Jan 2011 Link to this post

    Hi, 
    I am using a Custom Skin.
     Can you please provide me the sprite image for my attached plus minus.
    I am not getting the similar look and feel same as that of Telerik Skin.

    Do I need to change the css and javascript inorder to achieve the similar behavior as that of the PlusMinus Image of Telerik Skin?

    Thanks 
  6. Yana
    Admin
    Yana avatar
    4847 posts

    Posted 18 Jan 2011 Link to this post

    Hi Ali,

    You can change the plus/minus images with the following css styles:

    <style type="text/css">
        div.RadTreeView .rtPlus,
        div.RadTreeView .rtMinus
        {
            background: #fff url('plusminus.png') 0 0;
        }
        div.RadTreeView .rtMinus
        {
            background-position: 0 -11px;
        }
    </style>

    You can find the image attached.

    All the best,
    Yana
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top