Remove lines from tree vertical menu - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 08-Nov-2011 00:00

How can I style out the dashed lines in a vertical tree menu?

Thanks!

Ron

Posted by Community Admin on 11-Nov-2011 00:00

Hi Ron,

The existence of lines connecting Nodes is controlled by the ShowLineImages property (default is True). Setting ShowLineImages to False hides connecting images. You can also hide/modify the lines by applying one of our skins to your menu or create your own custom one and set it to your navigation. Also, here you can find some more information about css classes, applied to the RadTreeView. The class you can use to apply styles on the lines is .rtLines.

Greetings,
Jen Peleva
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 17-May-2012 00:00

When I drag the control into my template and edit it, I do not see an item in simple or advanced window for ShowLineImages. I am using Sitefinity 5. How do I set this attribute?

Posted by Community Admin on 17-May-2012 00:00

When I drag the control into my template and edit it, I do not see an item in simple or advanced window for ShowLineImages. I am using Sitefinity 5. How do I set this attribute?

Posted by Community Admin on 22-May-2012 00:00

Hello Nancy,

The property I was referring to isn't exposed in our default navigation. You can set it declaratively to a custom RadTreeView navigation, created in Visual Studio (an .ascx file with a SiteMapDataSource). Then this navigation can be registered in Sitefinity as a new control.

.ascx file

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RedTreeView.ascx.cs" Inherits="SitefinityWebApp.Controls.RedTreeView" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />

<telerik:RadTreeView ID="RTV" runat="server"

onnodedatabound="RTV_NodeDataBound" DataSourceID="SiteMapDataSource1" ShowLineImages="false" ></telerik:RadTreeView>

The above markup can also be used as a tempate for the default TreeView navigation in Sitefinity. For this purpose you should enter the relative path to the .ascx file in the Design settings of the navigation, as shown in the attached image.

Another option would be to simply change the default Skin, which is set to the navigation - Sitefinity skin, by entering the name of your custom skin in the Wrapper CSS class field. This automatically removes the line images, which are set to the TreeView (screenshot TreeViewLines).

Let me know if you need additional assistance.

Greetings,
Jen Peleva
the Telerik team

Posted by Community Admin on 22-May-2012 00:00

Thank you for your help Jen. I will give that a try.

This thread is closed