Creating a submenu

This topic describes how to use the EPiServer:PageTree control 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. In this example the control has been named SubMenu.
2. In the SubMenu.ascx file, add an EPiServer PageTree control EPiServer:PageTree. The control ID value was named SubMenu in this example.
3. Set the ShowRootPage attribute to true to display the root page at the top of the page tree.
4. 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) and occurs in the code-behind OnLoad function.
5. In the PageTree list, display each page’s name as a link to that page; use the PageLink property of the current page.
6. Make the code in the templates dynamic, displaying the page names as links to the pages, by using the Episerver PageLink property.
7. Place <ItemTemplate> tags around the property, displaying each subpage’s name as a link.
   

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

8. 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.
9. Enhance the appearance of the control by adding more templates.
10. In the code-behind for SubMenu, you need to establish which page’s subpages shall be listed as a page tree. The following code declares a private MenuList, and writes a get/set function that gets and/or sets the data source for this control.
    

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

11. 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;
            }

12. In the master page, register the SubMenu control on the page. Add the SubMenu control in the appropriate location in the master page.
    The submenu (and main menu) should be complete and working now. 
13. Build the solution and use your web browser to verify the links displayed in the top level menu by clicking on them. The left-centered menu should display links to the pages below the selected team in the website structure. (Compare to the page tree displayed in Edit mode).
14. 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();
    }

}