How to add Image into the Menu created using Sitemap

[Lakul]

Hi,

I have created Menu using Sitemap.

SITEMAP CODE

 <siteMapNode title="MainMenuItem">                 
                  <siteMapNode controller="subController1" action="Index" title="SubMenu1"/>
                  <siteMapNode controller="subController2" action="Index" title="SubMenu2" />
                  <siteMapNode controller="subController3" action="Index" title="SubMenu3" />
  </siteMapNode>

Telerik Code is:
 Html.Telerik().Menu().Name("MyMenu").BindTo("web").Orientation(MenuOrientation.Vertical).Render()

how can i add image to MainMenuItem or SubMenuItem of Menu

Thanks,
Lakul

[Georgi Krustev]

Hello Lakul,

In order to achieve your goal you will need to use SiteMapNode.Attributes collection:

[View]:

<%= Html.Telerik().Menu()
       .Name("Menu")
       .BindTo("sample", (item, node) => {
           var url = node.Attributes["imageurl"];
           if(url != null)
            item.ImageUrl = node.Attributes["imageurl"].ToString();
       })
%>

[Sitemap]:

<siteMapNode title="MainMenuItem">
                 <siteMapNode controller="subController1" action="Index" title="SubMenu1" imageurl="imageurl"/>
                 <siteMapNode controller="subController2" action="Index" title="SubMenu2" />
                 <siteMapNode controller="subController3" action="Index" title="SubMenu3" />
 </siteMapNode>

Regards,
Georgi Krustev
the Telerik team

[Lakul]

Thanks Georgi Krustev

[Sysdata Labs]

Thanks! This is exactly what I was looking for. Works great.

[steve]

I am wondering if I can use sitemapnode attributes to add change the class, id, or border styles.  Because the telerik menu automatically sets all of items in my menu to be in the same class, I cannot customize the border for an individual item.  If I can change the class on one item, then I could change the css to edit the border. Or, if I can change the border from the site map, that would also work.  If anyone knows a solution, please share.  Thank you.

[Sysdata Labs]

I was able to fully customize the layout of the Menu controller by setting custom formatting for the exact CSS class the controller renders. I used Google Chrome's developer tools to find the right CSS class name. From Chrome, just click "Ctrl + Shift + I" and hover over the menu controller. Good luck!