Programmatically setting the root page for a NavigationContr

Posted by Community Admin on 06-Nov-2014 00:00

The website I'm developing has a horizontal menu on the top of the page template showing the main sections:

Home
Section 1
Section 2
....

Then it needs a vertical side menu in each page showing the pages inside the current section. For example if the user is in a page nested deep inside Section 1, the side menu needs to display all the children of Section 1.

I understand that one way to achieve this is putting in each page under Section 1 an instance of the menu with the selection mode SelectedPageChildren, pointing to the "Section 1" page. But I want to put the menu in the custom template used by all pages of the site and have it pick automatically the root page of the current section. The menu used to be able to do this in Sitefinity 3.7 (setting StartingNodeOffset = 1).

I tried by handling the global IPreRenderCompleteEvent event with this code:

private void OnPagePreRenderCompleteEventHandler(IPagePreRenderCompleteEvent e)

SiteMapNode rootNode = SiteMapBase.GetCurrentProvider().RootNode;
if (rootNode.Title == "Pages")

Control menu = FindControlRecursive(e.Page, "SideNavigationMenu"); //TC20540BB003
if (menu != null)

NavigationControl nav = menu as NavigationControl;
if (nav != null)

SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;
while (currentNode.ParentNode != rootNode)
currentNode = currentNode.ParentNode;

Guid currentPageId = new Guid(currentNode.Key);
PageNode selectionStartPageNode = App.WorkWith().Pages().Where(x => x.Id == currentPageId).Get().SingleOrDefault();
nav.SelectionMode = PageSelectionModes.SelectedPageChildren;
...

But the SelectedPageTitle property is read only, so what should I do in order to set the root page of the menu? Is there a better approach than this?

Posted by Community Admin on 06-Nov-2014 00:00

Hi Alessio,

Just created a ticket a few hours ago with the same question. Hope to have a solution that indeed works like the 3.7 menu.

Best,
Daniel

Posted by Community Admin on 18-Nov-2014 00:00

Hello Daniel and Alessio,

As I have explained in the support ticket, you need to include the following javascript in your navigation template:

<%@ Control Language="C#" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.Extensions.LightNavigationControlTemplate" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

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

<sf:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic">

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.nav.widget.css" Static="true" />

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="true" />

<sf:ResourceFile JavaScriptLibrary="JQuery" />

<sf:ResourceFile JavaScriptLibrary="KendoWeb" />

</sf:ResourceLinks>

<navigation:SitefinitySiteMapDataSource runat="server" ID="dataSource" />

<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" />

<div class="sfNavWrp sfNavTreeviewWrp <%= this.GetCssClass() %>">

<%-- responsive design section - renders templates for the responsive design--%>

<navigation:NavTransformationTemplate runat="server" TransformationName="ToToggleMenu" TemplateName="ToggleMenu" />

<navigation:NavTransformationTemplate runat="server" TransformationName="ToDropDown" TemplateName="Dropdown" />

<%-- end of the responsive design section --%>

<ul class="sfNavTreeview sfNavList" runat="server" id="navigationUl">

<navigation:NavigationContainer runat="server" DataSourceID="dataSource">

<Templates>

<navigation:NavigationTemplate>

<Template>

<li>

<a runat="server"

href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></

a>

<ul runat="server" id="childNodesContainer"></ul>

</li>

</Template>

<SelectedTemplate>

<li>

<a runat="server"

href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' class="sfSel" target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></

a>

<ul runat="server" id="childNodesContainer"></ul>

</li>

</SelectedTemplate>

</navigation:NavigationTemplate>

</Templates>

</navigation:NavigationContainer>

</ul>

</div>

<%-- link to Kendo documentation http://demos.kendoui.com/web/treeview/index.html --%>

<script type="text/javascript">

$(document).ready(function ()

var kendoTreeView = $('.sfNavTreeview').kendoTreeView(

animation: false

).data('kendoTreeView');

var selectedNodes = $(".k-item:has(ul .sfSel)");

kendoTreeView.expand(selectedNodes);

var items = $('.sfSel');

if(items.length > 1)

var allParent = $(".sfNavTreeview > li");

allParent.hide();

selectedNodes.show();

);

</script>

The required code is in yellow. For your convenience I have pasted the entire markup I used for my test.

I hope this serves you well.

Regards,
Vassil Vassilev
Telerik

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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 19-Nov-2014 00:00

Thank you, although in the meanwhile I have created a custom navigation control based on a RadTreeview so we can better control its layout and behavior.

This thread is closed

All Replies