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.

    Ideas?

    Thanks,
    Kevin
  • 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:

    SubNavigation.ascx
    <%@ 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">
    </telerik:RadPanelBar>
     
    <sfNav:SitefinitySiteMapDataSource ID="sfDatasource" runat="server" SiteMapProvider="SitefinitySiteMap"
        ShowStartingNode="true" StartFromCurrentNode="false" StartingNodeOffset="1" />

    SubNavigation.ascx.cs
    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;
                     else
                        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,
    Daniel
  • Would jQuery be an option if the menu item can be distinguished and stays unchanged?

    Search of item, add css.

    Markus