Expand Collapse Icons

[richard]

Hi
Is there an easy way to change the expand/collapse icons in the TreeView.
Many thanks

[Princy]

Hello,

Try the following CSS.
CSS:

<style type="text/css">
 .rtPlus,.rtMinus
  {
     background:url('../Images/image1.gif') ! important;
  }
</style>

Thanks,
Princy.

[richard]

Hi
many thanks for your reply, sorry for the delay in getting back to you.

I am wondering if it is possible to sepcifyf  expand and collapse images at runtime for specific nodes, as some branches will be require  different images.

Many thanks
Richard

[Ivan Zhekov]

Hello Richard,

Each node can have it's own custom ContentCssClass. You can combine that css class with the expand collapse icon to create truly customized look e.g.:

.RadTreeView_Default .custom1 .rtPlus,
.RadTreeView_Default .custom1 .rtMinus {
    background-image :url("http://aspnet-skins.telerikstatic.com/ajaxz/2011.3.1115/Forest/TreeView/PlusMinus.png");
}
.RadTreeView_Default .custom2 .rtPlus,
.RadTreeView_Default .custom2 .rtMinus {
    background-image: url("http://aspnet-skins.telerikstatic.com/ajaxz/2011.3.1115/Sunset/TreeView/PlusMinus.png");
}
.RadTreeView_Default .custom3 .rtPlus,
.RadTreeView_Default .custom3 .rtMinus {
    background-image: url("http://aspnet-skins.telerikstatic.com/ajaxz/2011.3.1115/Windows7/TreeView/PlusMinus.png");
}

<telerik:RadTreeView runat="server" Skin="Default">
    <Nodes>
        <telerik:RadTreeNode Text="Personal Folders" Expanded="true">
            <Nodes>
                <telerik:RadTreeNode Text="Deleted Items (79)" ContentCssClass="custom1">
                    <Nodes>
                        <telerik:RadTreeNode Text="Spam (33)" />
                        <telerik:RadTreeNode Text="Old (46)" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Drafts (2)" />
                <telerik:RadTreeNode Text="Inbox (23)" ContentCssClass="custom2">
                    <Nodes>
                        <telerik:RadTreeNode Text="Family (1)" />
                        <telerik:RadTreeNode Text="Friends (2)" />
                        <telerik:RadTreeNode Text="Partners" />
                        <telerik:RadTreeNode Text="New Offers (8)" />
                        <telerik:RadTreeNode Text="Job candidates (12)" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Junk Email (34)" />
                <telerik:RadTreeNode Text="Outbox" />
                <telerik:RadTreeNode Text="Public folders (2)" ContentCssClass="custom3">
                    <Nodes>
                        <telerik:RadTreeNode Text="Favorites" />
                        <telerik:RadTreeNode Text="All Public Folders (2)" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="RSS Feeds" />
                <telerik:RadTreeNode Text="Sent Items" />
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

Just like in the attached project

Regards,
Ivan Zhekov
the Telerik team

[richard]

Hi Ivan,

this is a really great reply, thank you very much indeed.

Best Regards
Richard