Style a single RadMenu list item? - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Style a single RadMenu list item?

  • Style a single RadMenu list item?
  • Hi,

    We're using a horizontal drop-down RadMenu control for main navigation, with the items taken from the top-level pages (and their titles).

    Is there any way to style a single list item differently from the others? I figured it would be a matter of an overriding style based on page ID, but I don't believe there's an easy way to set this.


  • Hey Kevin,

    I don't think you can do this without creating your own menu for this, or maybe override the built in navigation widget.

    I would probably create my own control, which would use the RadMenu control and feed it with a SiteMap. On the ItemDataBound event you could assign classes to the individual items.

    Something like this:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SubNavigation.ascx.cs"
    Inherits="SitefinityWebApp.Widgets.Navigation.SubNavigation" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls"
        TagPrefix="sfNav" %>
    <telerik:RadPanelBar ID="sideNavigation" runat="server"
        EnableEmbeddedSkins="false" DataSourceID="sfDatasource" Skin="Konstrui_Side" ExpandMode="MultipleExpandedItems" EnableViewState="True">
    <sfNav:SitefinitySiteMapDataSource ID="sfDatasource" runat="server" SiteMapProvider="SitefinitySiteMap"
        ShowStartingNode="true" StartFromCurrentNode="false" StartingNodeOffset="1" />

    using System;
    using System.Web.UI;
    using Telerik.Sitefinity.Web;
    using Telerik.Sitefinity.Web.UI;
    namespace SitefinityWebApp.Widgets.Navigation
        public partial class SubNavigation : System.Web.UI.UserControl
            protected void Page_Load(object sender, EventArgs e) this.sideNavigation.ItemDataBound += new Telerik.Web.UI.RadPanelBarEventHandler(sideNavigation_ItemDataBound);
            void sideNavigation_ItemDataBound(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)
                if (this.GetIndexRenderMode() == IndexRenderModes.Normal)
                    var item = e.Item.DataItem as PageSiteNode;
                    var actualCurrentNode = SiteMapBase.GetActualCurrentNode();
                    if (actualCurrentNode.LocalizationStrategy == Telerik.Sitefinity.Localization.LocalizationStrategy.Split)
                        if (actualCurrentNode.PageLinksIds != null)
                            if (actualCurrentNode.PageLinksIds.Contains(item.Id))
                                e.Item.Selected = true;
                        if (item.Url == actualCurrentNode.Url)
                            e.Item.Selected = true;

    Not exactly the same as your requirement, but you get the idea?
    If not, let me know.

    Kind regards,
  • Would jQuery be an option if the menu item can be distinguished and stays unchanged?

    Search of item, add css.