Current page hightlight in custom navigation

Posted by Community Admin on 05-Aug-2018 15:43

Current page hightlight in custom navigation

All Replies

Posted by Community Admin on 17-Oct-2013 00:00

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?

Posted by Community Admin on 22-Oct-2013 00:00

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.

Regards,
Ivan D. Dimitrov
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 22-Oct-2013 00:00

@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

Posted by Community Admin on 22-Oct-2013 00:00

@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.

Posted by Community Admin on 25-Oct-2013 00:00

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 += newTelerik.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"
                
 
            
        
    

Under advanced tab of the designer you could set template path property for an existing mode. Please refer to the image attached for further clarification.

Regards,
Ivan D. Dimitrov
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 25-Oct-2013 00:00

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.

Posted by Community Admin on 30-Oct-2013 00:00

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,
Ivan D. Dimitrov
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 30-Oct-2013 00:00

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.

Posted by Community Admin on 04-Nov-2013 00:00

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,
Ivan D. Dimitrov
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed