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

2 posts, 1 answers
  1. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 30 Aug 2013 Link to this post

    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>
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 03 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top