Current page hightlight in custom navigation
I've added a custom navigation to my site, and noticed that the current page isn't being highlighted. If I change it to one of the built in navigation options(Horizontal, Horizontal with drop down menus, etc...), it adds the class "rtsSelected" along with the "rtsLink" class to the active page menu item. In the Custom Navigation, it only adds the class "rsmLink" and no class is added for the selected page. I've gone through the "advanced" options for both navigation types and it appears all the values are identical.
So my question is: is there a way to have the active page highlight in a custom navigation?
Hi Owen,
There is of course a number of ways you can add a highlight to the selected menu node. Since I have no way of viewing your custom control I can recommend you the neat RadMenu samples we have available here. Have a good look at all the information there.
I hope this is helpful. Feel free to contact us if you need additional assistance.
@Owen
Is there a different if you have a page under a group page (as it loads beein redirected) or if you access a page directly.
Markus
@Ivan
I am not using a custom control (at least, I haven't created a custom control).
To clarify: In SiteFinity, I am in the page editor and drag the default navigation widget that comes with SiteFinity over into a content area. Once there, I click on the edit button on the top right of that newly added navigation. It pops up a dialog that has two columns- the left column is labeled "What type of navigation to use" and the other "Fine tune the selected type." In the left column, I select the bottom option: "Custom Navigation." I am going to be controlling this with my own custom css and don't want the extra spans the other options add in or to have to fight the built in styles and javascript of the other options. Then I (in the right column) set the navigation to specify which pages to show in the menu.
So, I am using a default setting built into SiteFinity. Nothing custom about it. And everything works fine, except it doesn't add a selected state to any pages when they are the active page. If I change the navigation type (again, using the edit button and selecting a different option in the "What type of navigation to use" column), the active state is correctly applied throughout the site. I have looked at the advanced settings between the "Horizontal" navigation type and the "Custom Navigation" type and the settings appear to be identical.
@Markus
The navigation appears to work the same doing it either way.
Hi Owen,
From what I understand you are using our old navigation menu. The easiest way for you to get the page highlated is to use your template. Select Custom Navigation. Under Design Settings set path to a template where you have Navigation control - say RadPanelBar. Get the current node in the code behind and apply some class.
For example:
<
telerik:RadPanelBar
ID
=
"RadPanelbar1"
runat
=
"server"
>
</
telerik:RadPanelBar
>
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
Telerik.Sitefinity.Web;
namespace
SitefinityWebApp.Controls
public
partial
class
RadTreeViewNavigation : System.Web.UI.UserControl
protected
void
Page_Load(
object
sender, EventArgs e)
this
.RadPanelbar1.ItemDataBound +=
new
Telerik.Web.UI.RadPanelBarEventHandler(RadPanelbar1_ItemDataBound);
void
RadPanelbar1_ItemDataBound(
object
sender, Telerik.Web.UI.RadPanelBarEventArgs e)
SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;
if
(currentNode !=
null
)
var item = RadPanelbar1.FindItemByUrl(Page.ResolveUrl(currentNode.Url));
if
(item !=
null
)
item.Selected =
true
;
item.SelectedCssClass =
"yourclass"
I've got that working, Ivan, but unfortunately now it is picking up the RadPanelBar styles and extra output that Telerik throws in. Is there a clean Telerik navigation that doesn't output extra spans or try to insert styles?
For instance, if I just select the "Custom Navigation" option I get this clean output:
<li class="rsmItem"><a class="rsmLink" href="giving-back">Giving Back</a></li>
All I want to do is add an active class to the <li> tag on the active page.
But as soon as I insert a RadPanel I get this (empty spans, nested spans, unneeded spans):
<a href="giving-back" class="rpLink active"><span class="rpOut rpNavigation"><span class="rpExpandHandle"></span><span class="rpText">Giving Back</span></span></a>
and, probably the most annoying thing, Telerik.Web.UI.WebResource steps all over my styles with it's own RadPanelBar styles.
That is what I'm trying to avoid. I don't want SiteFinity to style my navigation at all. And I don't want extra, unneeded spans cluttering the HTML.
Hi Owen,
This is the normal behavior of the RadPanelBar. All of those spans are simply the elements of the menu and you can style all of them by overwriting the classes in a css or a javascript. I realize that this results in a lot of markup but that way you get much more styling capabilities.
Regards,Thank you Ivan.
I think what I'm hearing you say is that there is no way to get Sitefinity to generate a basic functional, clean, non-styled navigation. I was afraid of that. Your old navigation menu (Custom Navigation) came close, which gave me hope. Shame... it would be nice to have clean output to style without fighting the built in styles all the time.
Hello Owen,
My apologies for the unwanted effects of our navigation control. I do understand that working with so much HTML can prove troublesome, but it is required in order to sustain the functionality we provide. Sitefinity's navigation is an ASP.NET control and as such it generates and repeats a lot of markup in order to execute its designed behavior. More information about ASP.NET user controls can be found in MSDN.
Regards,