Submenu navigation 2 levels

Posted by Community Admin on 03-Oct-2011 00:00

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

Posted by Community Admin on 03-Oct-2011 00:00

Hi,

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

thanks

Posted by Community Admin on 03-Oct-2011 00:00

Hi,

I made a custom control for this.

Regards,
Nicolas

Posted by Community Admin on 03-Oct-2011 00:00

Awesome! Would you like to share it?

Cheers,
Daniel

Posted by Community Admin on 03-Oct-2011 00:00

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

Posted by Community Admin on 13-Oct-2011 00:00

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

Posted by Community Admin on 13-Oct-2011 00:00

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

Posted by Community Admin on 13-Oct-2011 00:00

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

Posted by Community Admin on 13-Oct-2011 00:00

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.

Posted by Community Admin on 13-Oct-2011 00:00

@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!

Posted by Community Admin on 13-Oct-2011 00:00

Dear Daniel

Glad to hear it works :-)

Markus

Posted by Community Admin on 09-Feb-2016 00:00

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.

This thread is closed

All Replies