Try Now
More in this section

Forums / Designing & Styling / Style a single RadMenu list item?

Style a single RadMenu list item?

3 posts, 0 answered
  1. Kevin
    Kevin avatar
    16 posts
    09 Feb 2012
    19 Sep 2013
    Link to this post

    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.


  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    18 Feb 2004
    19 Sep 2013 in reply to Kevin
    Link to this post
    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;
                    } 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,
  3. Markus
    Markus avatar
    2763 posts
    25 Nov 2005
    20 Sep 2013 in reply to Daniel Plomp
    Link to this post
    Would jQuery be an option if the menu item can be distinguished and stays unchanged?

    Search of item, add css.

3 posts, 0 answered