New to Kendo UI for jQuery? Download free 30-day trial

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();
            }
        })
    )
In this article