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
>