Menu with only Images including a SubMenu of Text Links - text links are not showing up and url is not generated in href

[Carrie]

Hello,
I am trying to implement a menu that uses Images for the parent level and has a sub menu that contains text links.   The submenu text links are not showing.   My code is below - any help is greatly appreciated.

View

@(Html.Kendo().Menu()
         .Name("menuImagesNoText")
         .BindTo(Model, mappings =>
             {
                 mappings.For<WebConsole.Models.MenuItem>(binding => binding
                                                                         .ItemDataBound((item, category) =>
                                                                             {
                                                                                 item.ActionName = category.Action;
                                                                                 item.ControllerName = category.Controller;
                                                                                 item.ImageUrl = String.IsNullOrEmpty(category.ImageName) ? "": Url.Content(category.ImageName);
                                                                                 item.Selected = category.Selected;
                                                                                 item.ImageHtmlAttributes.Add("class", "sidebarImage");
                                                                             })
                                                                         .Children(category => category.MenuItems));
                 mappings.For<WebConsole.Models.MenuItem>(binding => binding
                                                                         .ItemDataBound((item, childcategory) =>
                                                                             {
                                                                                 item.Text = childcategory.LinkText;
                                                                                 item.ActionName = childcategory.Action;
                                                                                 item.ControllerName = childcategory.Controller;
                                                                             }));
             }).Orientation(MenuOrientation.Vertical).HighlightPath(false)
         )

Controller

public ActionResult Index(int selected)
     {
            var MainMenu = new Menu()
             {
                 MenuItems = new List<MenuItem>()
                         {
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/home_orange.gif",
                                     LinkText = "DASHBOARD",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 1,
                                     Selected = true
                                 },
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/new_white.gif",
                                     LinkText = "NEW WORK ITEM",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 2,
                                     Selected = false,
                                     MenuItems = new List<MenuItem>()
                                         {
                                             new MenuItem()
                                                 {
                                                     LinkText = "NEW INCIDENT",
                                                     Controller = "Home",
                                                     Action = "Index",
                                                     Ordinal = 1,
                                                     Selected = false
                                                 },
                                             new MenuItem()
                                                 {
                                                     LinkText = "NEW CHANGE REQUEST",
                                                     Controller = "Home",
                                                     Action = "Index",
                                                     Ordinal = 2,
                                                     Selected = false
                                                 },
                                             new MenuItem()
                                                 {
                                                     LinkText = "NEW SERVICE REQUEST",
                                                     Controller = "Home",
                                                     Action = "Index",
                                                     Ordinal = 3,
                                                     Selected = false
                                                 }
                                         }
                                 },
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/team_white.gif",
                                     LinkText = "MY TEAM'S WORK ITEMS",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 3,
                                     Selected = false
                                 },
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/my_white.gif",
                                     LinkText = "ALL MY WORK ITEMS",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 4,
                                     Selected = false
                                 }
                          };

         return PartialView(MainMenu.MenuItems);
     }

Generated HTML

<ul id="menuImagesNoText" class="k-widget k-reset k-header k-menu k-menu-vertical" data-role="menu" tabindex="0" role="menubar">
     <li class="k-item k-state-selected k-state-default k-first" role="menuitem">
     <a class="k-link" href="/">
         <img class="k-image sidebarImage" src="/Images/home_orange.gif" alt="image">
      </a>
      </li>
    <li class="k-item k-state-default" role="menuitem">
        <a class="k-link" href="/">
           <img class="k-image sidebarImage" src="/Images/new_white.gif" alt="image">
           <span class="k-icon k-i-arrow-e"></span>
           </a>
         <ul class="k-group" role="menu" aria-hidden="true">
              <li class="k-item k-state-default k-first" role="menuitem">
                  <a class="k-link" href="/"></a>
                   </li>
              <li class="k-item k-state-default" role="menuitem">
                  <a class="k-link" href="/"></a>
                     </li>
              <li class="k-item k-state-default k-last" role="menuitem">
                  <a class="k-link" href="/"></a>
                    </li>
             </ul>
       </li>
</ul>

[Daniel]

Hello Carrie,

The data is homogeneous so the Menu will automatically bind the children based on the first specified mapping. The second mapping will be ignored. In order to show the text for the children you could either set it when no image is specified:

mappings.For<MenuParentIDBinding.Models.MenuItem>(binding => binding
    .ItemDataBound((item, category) =>
        {
            item.ActionName = category.Action;
            item.ControllerName = category.Controller;
            if (String.IsNullOrEmpty(category.ImageName))
            {
                item.Text = category.LinkText;
            }
            else
            {
                item.ImageUrl = Url.Content(category.ImageName);
            }

            item.Selected = category.Selected;
            item.ImageHtmlAttributes.Add("class", "sidebarImage");
        })
    .Children(category => category.MenuItems));

or use the Items method instead.

Regards,
Daniel
Telerik