Creating a Submenu

Introduction

This document describes how the EPiServer PageTree control can be used to list a page’s subpages.

Creating a Submenu with EPiServer PageTree Control

Create a submenu with the EPiServer PageTree control as follows:

1. Add a new EPiserver web control to the project, see How to Create a EPiServer Web Control Template. In this example the control has been named SubMenu.
2. In the SubMenu.ascx file, add a EPiServer PageTree control EPiServer:PageTree. In this example the control ID value has been named SubMenu. Set the ShowRootPage attribute to true in order to display the root page at the top of the page tree.
3. The context for the PageTree is retrieved from the control’s page link attribute. In this example it is set to the MainMenu control attribute OpenTopPage (gets the open top page) – carried out in the code-behind OnLoad function.
4. In the PageTree list we shall display each page’s name as a link to that page. The easiest way to achieve this is by using the PageLink property of the current page. The code in the templates has to be made dynamic, displaying the page names as links to the pages. The easiest way to achieve this is by using the EPiServer PageLink property see the code example. Place <ItemTemplate> tags around the property, displaying each subpage’s name as a link.
   

   <ItemTemplate>
          <EPiServer:Property PropertyName="PageLink" 
          runat="server" />
   </ItemTemplate>

5. To clearly denote to the user which page is being displayed, use the <SelectedItemTemplate> template. The Container object exposes relevant properties for each item in the list. Enhance the appearance of the control by adding more templates, see the code example below.
6. In the code-behind for SubMenu, you need to establish which page’s subpages shall be listed as a page tree. In the code below you have declared a private MenuList written a get/set function which gets and/or sets the data source for this control.
   

   private MenuList _menuList;
   
           public MenuList MenuList
           {
               get { return _menuList; }
               set { _menuList = value; }
           }

7. In the master page’s OnLoad function, assign the values for the MainMenu control to the SubMenu.

   protected override void OnLoad(System.EventArgs e)
           {
               base.OnLoad(e);
               SubMenu.MenuList = MainMenu.MenuList;
           }

8. In the master page, register the SubMenu control on the page. Add the SubMenu control in the appropriate location in the master page.
9. The submenu (and main menu) should now be complete and working. Build the solution and use your web browser to verify that the links displayed in the top level menu by clicking on them. The left centered menu should now display links to the pages below the selected team in the website structure (compare to the page tree displayed in Edit mode).
10. Verify that the navigation is working by clicking on the links.

SubMenu code example markup:

<episerver:pagetree ShowRootPage="false" runat="server" id="Menu">
    <IndentTemplate>
        <ul>
    </IndentTemplate>

    <ItemHeaderTemplate>
            <li>
    </ItemHeaderTemplate>

    <ItemTemplate>
                <EPiServer:Property PropertyName="PageLink" runat="server" />
    </ItemTemplate>

    <SelectedItemTemplate>
                <EPiServer:Property CssClass="selected" PropertyName="PageName" runat="server" />
    </SelectedItemTemplate>

    <ItemFooterTemplate>
            </li>
    </ItemFooterTemplate>

    <UnindentTemplate>
        </ul>
    </UnindentTemplate>
</episerver:pagetree>

SubMenu code example code-behind:

public partial class SubMenu : UserControlBase
{
    private MenuList _menuList;

    /// <summary>
    /// Gets or sets the data source for this control
    /// </summary>
    public MenuList MenuList
    {
        get { return _menuList; }
        set { _menuList = value; }
    }

    protected override void OnLoad(System.EventArgs e)
    {
        base.OnLoad(e);

        if (MenuList == null)
        {
            return;
        }
        Menu.PageLink = MenuList.OpenTopPage;
        Menu.DataBind();
    }

}