How to Change the Expand and Collapse Icons?

[Pooya]

I'm using the RadTreeView control.

How to Change the Expand and Collapse Icons to be e.g. arrows instead of + and - icons?

Currently the plus and minus icons are embedded in the Telerik assembly judgying by the background-image value:

url("WebResource.axd?d=VgJdxXzsswqOdCD5rvTw9qbASzacFrx1ogUDI2C8a8ec2xoyM_TB0dE7ON7_Qufmatd1FUHdwBxJuyWB5iw6-kRks3J05ogSsFdHXjCEjQfuCDzPhAViqekZ41WXyBJy0y5vpj0JBT8YkXRnUrmL8-ofV0U1&t=634342277869187417")

are there any other images embedded e.g. arrows that I can use?

Thanks,

[Kate]

Hi Pooya,

You could apply the following css classes to your project in order to apply different picture for the plus and minus sign and to remove the dashed lines beweeen the nodes. I have also attached a sample page along with the image of he Vista skin applied to the RadTreeView:

div.RadTreeView_Default .rtPlus, div.RadTreeView_Default .rtMinus {
   background-image: url("images/PlusMinus.png");
   }

   div.RadTreeView_Default .rtLines .rtTop,
   div.RadTreeView_Default .rtLines .rtMid,
   div.RadTreeView_Default .rtLines .rtBot,
   div.RadTreeView_Default .rtLines .rtLast .rtTop,
   div.RadTreeView_Default .rtLines .rtFirst,
   div.RadTreeView_Default .rtLines .rtFirst .rtUL,
   div.RadTreeView_Default .rtLines .rtLI,
   div.RadTreeView_Default .rtLines .rtFirst .rtUL

   {
       background-image: none;
   }

Kind regards,
Kate
the Telerik team

[Pooya]

Thanks, so there is no built in arrow icons I'm learning.

[Kate]

Hello Pooya,

There are different skins that support different "plus"/"minus"  images on the RadTreeview control. You can refer to our online demos for mode examples. However, my previous post demonstrates how you can alter the above mentioned image, so you can replace it with a custom created one. 

Regards,
Kate
the Telerik team

[ankit]

How do i change the icon at run time. The expand and collapse icon in my application is decided at run time while binding i.e. which image will be placed for expanding or collapsing. How can i achieve this. And this is seperate for each node.

One more thing, Is it possible to have icon on every node irrespective of whether it has children or not.

[Kate]

Hi Ankit,

Using the ContentCssClass property of the RadTreeView control (it can be done either in the markup or in code behind) you could set different css classes to the different nodes. Thus, applying the classes along with the right selectors you can have different images for expanding the nodes. Here is an example how this can be achieved in the markup:

<style type="text/css">
        .new .rtPlus, .new .rtMinus
        {
            background-image: url('../images/plus-minus-icon1.png') !important;
        }

        .new1 .rtPlus, .new1 .rtMinus
        {
            background-image: url('../images/plus-minus-icon2.png') !important;
        }

        .new2 .rtPlus, .new2 .rtMinus
        {
            background-image: url('../images/plus-minus-icon3.png') !important;
        }


    </style>

 

<telerik:RadTreeView ID="RadTreeView1" runat="server">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1" ContentCssClass="new" >
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2" ContentCssClass="new1">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2" ContentCssClass="new2">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>

For reference I also attached the page with the images that I applied.

Regards,
Kate
the Telerik team

[ankit]

Thanks for your response. But my requirement is to change the collapse/expand icons to some custom ones which will be determined in the code behind with some logic.

[Kate]

Hello Ankit,

Using code behind you could set a css class in the following way (first you get the RadTreeView control, then you find the node with text Root RadTreeNode1 and then set the new css class:

RadTreeView1.FindNodeByText("Root RadTreeNode1").ContentCssClass = "new";

Greetings,
Kate
the Telerik team

[ankit]

When a node is rendered, there is a div and 3 spans which make up a treenode

<div class="rtTop">
<span class="rtSp"></span>
<span class="rtMinus"></span>
<span class="rtIn">etst 1</span>
</div>

and in case of leaf node the node is rendered as follows:

<div class="rtTop pl-small">
<span class="rtSp"></span>
<span class="rtIn">etst 1</span>
</div>

As can be noted, in case of leaf node, the span is not rendered. So my first question here is - How can i add image on leaf node??

Second thing is that i want to change the image used for expanding and collapsing nodes, i.e. the second span class. How can i do that from server side ???

I hope my question is clear to you now.

[Kate]

Hello Ankit,

In general the RadTreeView control is not designed to render plus/minus icon when there are no child nodes. However, if you need to have such, where there are no child nodes, you could use the following approach - first  insert a child node where you need the plus/minus to appear and then set its Visible property to false. Thus, the desired css class will be rendered and you can easily change its image by apply the approach described in my previous posts. Here is also the markup:

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" ContentCssClass="new2">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" Visible="false" />
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>

Kind regards,
Kate
the Telerik team

[ankit]

I am looking for a treeview that will completes my requirement. However there are some limitations which I need to have a work around.

Requirements not meeting:

1. Change the Expand/Collapse image of treeview. The node is rendered in div and spans. I want to change the css of first span from server side of nodes according to my business logic. This is not exposed currently.
2. The leaf node (with no children) does not have any image. Rather it renders only 2 spans and does not render the span for image. I need image for leaf node. This is property of asp.net treeview but not exposed in Telerik control.

Both are not getting from this control. Is there any way to achieve this ??

[Kate]

Hello Ankit,

I think I finally got where the whole missunderstanding came from. In my previous response I didn't fully explained what the followin example was supposed to do:

<style type="text/css">
        .new .rtPlus, .new .rtMinus
        {
            background-image: url('../images/plus-minus-icon1.png') !important;
        }

        .new1 .rtPlus, .new1 .rtMinus
        {
            background-image: url('../images/plus-minus-icon2.png') !important;
        }

        .new2 .rtPlus, .new2 .rtMinus
        {
            background-image: url('../images/plus-minus-icon3.png') !important;
        }


    </style>

What I meant was to list all the available images assigning them to a specific css class. This way server-side and still during run-time you can determine the appropriate image and assign it to a node using node.ContentCssClass property.

The only issue that remains now is - how to add an image to a node which doesn't have children. You can achieve this by injecting a span element on ClientLoad event of RadTreeView and every time when creating a new node on the client-side (if such an action is required).

Here is one way to inject the elements in the proper locations:

var sp = $telerik.$(".rtLI>div:not(:has(.rtPlus)):not(:has(.rtMinus))").children(".rtSp");
$telerik.$("<span class='rtMinus'></span>").insertBefore(sp);

Please note that the scenario that you are trying to achieve is very customized one and the RadTreeView has Templates that you could use for this purpose.

I hope this was helpful for you

Greetings,
Kate
the Telerik team

[ankit]

Thanks for your response. I tried the solution you gave. The second one works.

But for first one, There is no ContentCssClass property in treenode.

private void AddNodes(Int64 parentId, RadTreeNode node, List<Folder> collection)
        {
            List<Folder> childNodes = collection.FindAll(delegate(Folder obj)
            {
                return (obj.ParentId == parentId);
            });
            if (childNodes == null)
            {
                return;
            }
            RadTreeNode newNode;
            for (int cnt = 0; cnt < childNodes.Count; cnt++)
            {
                newNode = new RadTreeNode(childNodes[cnt].Name, childNodes[cnt].Id.ToString());
                if (childNodes[cnt].FolderDisclaimerSet.Id > 0)
                {
                    newNode.Attributes.Add("IsDisclaimer", "true");
                    newNode.ContentCssClass = "";
                    //newNode.CssClass = "DisclaimerSet";
                }
                else
                {
                    newNode.Attributes.Add("IsDisclaimer", "false");
                }
                AddNodes(childNodes[cnt].Id, newNode, collection);
                newNode.Expanded = true;
                newNode.ExpandedImageUrl = "";

                node.Nodes.Add(newNode);
            }
        }

The above code gives a compile time error (on line newNode.ContentCssClass = "";)

Kindly suggest

[Kate]

Hello Ankit,

Here I have attached a simple page where I use the ContentCssClass property of the RadTreeNode and it works just fine when I set it in code behind.

Greetings,
Kate
the Telerik team

[ankit]

I think that we are using different versions then. I dont have that property in Node. What version are you using ?

[Kate]

The property is added in Q3 2008 Version Number 2008.3.1105 of the Telerik controls and the version that I use for testing is the latest one - Q2 2011.

Kate
the Telerik team

[ankit]

I have the demo version of latest available version. Does that matter??

File version of my dll = 2011.2.712.40

[Kate]

Hi Ankit,

I can not tell for sure why you encounter this issue, therefore I would suggest that you open a support ticket and send us a simplified runnable project so we can inspect it locally and see what is the actual cause.

Regards,
Kate
the Telerik team