Display Images in Menu Items When Using Sitemap Binding

Environment

Product	Progress® Telerik® UI Menu for ASP.NET MVC
Operating System	All
Browser	All
Preferred Language	C#

Description

How can I display images, which are set to different URLs, for the items in the .xml file to which I am binding the Menu?

Solution

1. Store the image URL as an attribute value in the .xml file where the image attribute is used for that purpose.

    <siteMapNode controller="menu" action="sitemapbinding" title="Baseball" image="/Content/shared/icons/sports/baseball.png" />

1. Access the attribute in the binding configuration of the Menu and set its value as an ImageUrl value.

    @(Html.Kendo().Menu()
        .Name("Menu")
        .BindTo("sample", (item, value) => {
            if (value.Attributes["image"] != null)
            {
                item.ImageUrl = value.Attributes["image"].ToString();
            }
        })
    )