how to change treeview style?

[khaled jendi]

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):

[Princy]

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.

[khaled jendi]

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

[Kamen Bundev]

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

[Ali]

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 

[Yana]

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