+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Programmatically setting the root page for a NavigationControl

Programmatically setting the root page for a NavigationControl

4 posts, 0 answered
  1. Alessio S.
    Alessio S. avatar
    37 posts
    Registered:
    31 May 2010
    06 Nov 2014
    Link to this post

    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?

  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    06 Nov 2014 in reply to Alessio S.
    Link to this post

    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

  3. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    18 Nov 2014
    Link to this post
    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
     
  4. Alessio S.
    Alessio S. avatar
    37 posts
    Registered:
    31 May 2010
    19 Nov 2014 in reply to Vassil Vassilev
    Link to this post
    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.
4 posts, 0 answered