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

Remove lines from tree vertical menu

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

    Thanks!

    Ron
  • 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
  • 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? 
  • 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? 
  • 360614_TreeViewLines.JPG
    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
    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
  • Thank you for your help Jen. I will give that a try.