Style a single RadMenu list item?

Posted by Community Admin on 19-Sep-2013 00:00

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

Posted by Community Admin on 19-Sep-2013 00:00

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

Posted by Community Admin on 20-Sep-2013 00:00

Would jQuery be an option if the menu item can be distinguished and stays unchanged?

Search of item, add css.

Markus

This thread is closed

All Replies