or
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" /><link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /><link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" /><link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script><script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script><script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2013.2.716/cultures/kendo.culture.en-GB.min.js")"></script><script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script><script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>Here is my code:
@(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) )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); }<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>