Creating tree-like menu

This article explains how to create a tree menu, using a simple tree with a parent item and child items. The tree can be used for any simple menu item (with no additional mark up, for example, without filters under the menu item). In our example, every tree item is a filter.

Example of data visualization

Fig. 1. Menu with a tree-like structure

Extension (interface) methods

The IMenuItemRenderer extension point (interface) has the following methods:

/// <summary>
/// Does the menu item have custom visualization
/// </summary>
/// <param name="item">Menu item for the tree</param>
/// <returns></returns>
bool HasCustomRender(MenuItemNode item);
 
/// <summary>
/// Generate mark up for the menu item
/// </summary>
/// <param name="htmlHelper">Helper</param>
/// <param name="item">Menu item for the tree</param>
/// <returns></returns>
MvcHtmlString Render(HtmlHelper htmlHelper, MenuItemNode item);

[Component]
public class MenuItemRenderer : IMenuItemRenderer
{
    public bool HasCustomRender(MenuItemNode item)
    {
        return item.Code == MyObjectMenu.NewPoint;
    }
 
    public MvcHtmlString Render(HtmlHelper htmlHelper, MenuItemNode item)
    {
        const bool highlightPath = true;
        var html = htmlHelper;
        var list = new List<TreeMenuNode>();
 
        if (item.Code == MyObjectMenu.NewPoint)
        {
            list.Add(new TreeMenuNode
            {
                id = "my_menu",
                Selected = true,
                text = SR.T("All objects"),
                href = html.Url().Action("FilterObject", "Home", new { area = RouteProvider.AreaName }),
                children = new List<TreeMenuNode>
                {
                    new TreeMenuNode
                    {
                        id = "Emails",
                        text = SR.T("Emails"),
                        href = html.Url().Action("FilterObject", "Home", new {area = RouteProvider.AreaName, obj = SR.T("Email")})
                    },
                    new TreeMenuNode
                    {
                        id = "ICQ",
                        text = SR.T("ICQ"),
                        href = html.Url().Action("FilterObject", "Home", new {area = RouteProvider.AreaName, obj = SR.T("ICQ")})
                    },
                }
            });
        }
 
        return html.Tree(list, "main_menu_tree_channels", highlightPath);
    }
}

Example of an extension point class

Example of the Home controller code:

[ContentItem]
public ActionResult FilterObject(string obj)
{
      var filter = CreateFilter();
        filter.Type = new DropDownItem(obj);
        return View("FilterObjects", CreateGridData(new GridCommand(), filter));
}

Links to API items

IMenuItemRenderer
IMenuItemsProvider