This is a migrated thread and some comments may be shown as answers.

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

1 Answer 45 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Carrie
Top achievements
Rank 1
Carrie asked on 30 Aug 2013, 07:30 PM
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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 03 Sep 2013, 11:46 AM
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!
Tags
Menu
Asked by
Carrie
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or