Submenu navigation 2 levels - General Discussions - General Discussions - Progress Community
 General Discussions

Submenu navigation 2 levels

  • Submenu navigation 2 levels
  • 303867_submenu.PNG
    Hi all,

    I need to have a submenu inside a template that can show navigation items 2 levels deep.
    See the attachment for an example.

    Someone who did already managed to do this?

    I've looked at the navigation control, but none of the options seems to fit for this.
    I can create a custom control for this, but maybe it is possible in another way.

    Regards,
    Daniel
  • Hi,

    I would also be interested in knowing how to do this as v3.7 did this but not v4?

    thanks
  • Hi,

    I made a custom control for this.

    Regards,
    Nicolas
  • Awesome! Would you like to share it? 

    Cheers,
    Daniel
  • No problem :)

    VerticalMenu.acsx :
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VerticalMenu.ascx.cs" Inherits="SitefinityWebApp.CustomComponent.VerticalMenu" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ResourceLinks ID="resourceLinks" runat="server" UseEmbeddedThemes="false">
         <sf:ResourceFile Name="~/Styles/VerticalMenu.css" Static="true" />
    </sf:ResourceLinks>
     
    <div id="verticalMenu">
        <asp:Literal ID="menuContent" runat="server" />
    </div>

    VerticalMenu.cs :
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using SF.Widgets.CommonLib;
    using Telerik.Sitefinity.Modules.Pages;
    using Telerik.Sitefinity.Pages.Model;
    using Telerik.Sitefinity.Services;
    using Telerik.Sitefinity.Web;
    using System.Globalization;
    using System.Threading;
     
    namespace SitefinityWebApp.CustomComponent
        public partial class VerticalMenu : System.Web.UI.UserControl
        
            #region Properties
     
            protected PageNode currentNode;
            protected IList<PageNode> NodeList;
            protected List<PageNode> ParentNodes = new List<PageNode>();
     
            #endregion Properties
     
            #region Methods
     
            private PageNode GetParent(PageNode pNode)
            
                PageNode pToReturn = pNode;
                ParentNodes.Add(pToReturn);
     
                if (pNode != null)
                
                    if (pNode.Parent != pNode.RootNode)
                        pToReturn = this.GetParent(pNode.Parent);
                
     
                return pToReturn;
            
     
            private void GetCurrentPage()
            
                //Get current page Key
                if (!string.IsNullOrEmpty(SiteMapBase.GetCurrentProvider().CurrentNode.Key))
                
                    Guid currentKey = new Guid(SiteMapBase.GetCurrentProvider().CurrentNode.Key);
                    PageManager pMng = new PageManager();
     
                    currentNode = pMng.GetPageNode(currentKey);
                    NodeList = this.GetParent(currentNode).Nodes;
                
            
     
            private void DisplayNode(IList<PageNode> pNodes, StringBuilder sb, bool firstLevel)
            
                sb.Append("<ul>");
                CultureInfo language = Thread.CurrentThread.CurrentCulture;
                 
                foreach (PageNode pNode in pNodes)
                               
                    if (pNode.ApprovalWorkflowState == "Draft"
                        || !pNode.AvailableCultures.Contains(language)
                        || (pNode.NodeType == NodeType.Group && pNode.Nodes.Count == 0))
                        continue;
     
                    if (pNode.WasPublished && pNode.ShowInNavigation)
                    
                        if (!firstLevel && !ParentNodes.Contains(pNode.Parent))
                        
                            continue;
                        
     
                        if (this.IsSelected(pNode.Id))
                        
                            sb.Append("<li class=\"selected\">");
                        
                        else
                        
                            sb.Append("<li>");
                        
     
                        sb.AppendFormat("<a href=\"0\">1</a>", pNode.GetFullUrl(language, false).Trim('~'), pNode.Title);
     
                        if (pNode.Nodes.Count > 0)
                            this.DisplayNode(pNode.Nodes, sb, false);
     
                        sb.Append("</li>");
                    
                
     
                sb.Append("</ul>");
            
     
            private bool IsSelected(Guid IdNode)
            
                foreach (PageNode pN in ParentNodes)
                
                    if (pN.Id.Equals(IdNode))
                        return true;
                
                return false;
            
     
            #endregion Methods
     
            protected void Page_Load(object sender, EventArgs e)
            
                if (SystemManager.IsDesignMode && !SystemManager.IsPreviewMode)
                
                    return;
                
     
                GetCurrentPage();
     
                StringBuilder sb = new StringBuilder();
                this.DisplayNode(NodeList, sb, true);
     
                this.menuContent.Text = sb.ToString();
            
        

    You just have to change the css file in ascx.

    Regards,
    Nicolas
  • Hi Nicolas,

    Thanks for sharing.
    I'm having some troubles with getting only the languages that are for the current selected culture. How would you adjust the code so that the menu shows only the current selected language?

    When I have a site with multiple languages it now shows all languages beneath each other.

    Regards,
    Daniel
  • Dear Daniel

    I usualy do this

    1. Level standard SF navigation widget

    2. and 3. level I use the DataSitemap and a RadPanelbar

    Maybe the screenshots help you set it up.

    Step 1
    Enable RadControls (screenshot 1). This will make them visible in your toolbox

    Step 2
    Drag a Site map data source widget to your template (screenshot 2)

    Step 3
    Configure the site map data source (screenshot 3)
    Copy the ID to past it later to the pannel bar

    Step 4
    Drag a PanelBar to the template (screenshot 4)

    Step 5
    Configure the PanelBar (screenshot 5)

    Hope I did not miss something here.

    Give it a try.

    Markus

  • Hi,

    Weird i'm also in multilingual and it works for me. Your page are synchronised ?

    I use into DisplayNode : CultureInfo language = Thread.CurrentThread.CurrentCulture;


    Regards,
    Nicolas
  • 306520_screenshot.jpg
    Okay, strange. I'm not sure if it synchronized. I'll check.
    See the screenshot for the behaviour. I enabled two languages at the moment.
  • @Markus: hey, your solutions works okay, so because of time I'll go for this. Although the RadPanelBar creates lots over overhead. I'm more into a clean solution, but don't have time to figure it out. Thanks!
  • Dear Daniel

    Glad to hear it works :-)

    Markus
  • Hi Markus,

    It works well when project is deployed on root. Navigation links are not found when project is deployed inside a folder. It does not takes its path. Can you please help.