+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Current page hightlight in custom navigation

Current page hightlight in custom navigation

9 posts, 0 answered
  1. Owen
    Owen avatar
    4 posts
    Registered:
    02 Oct 2013
    17 Oct 2013
    Link to this post
    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?
  2. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    22 Oct 2013
    Link to this post
    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
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    22 Oct 2013 in reply to Ivan D. Dimitrov
    Link to this post
    @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
  4. Owen
    Owen avatar
    4 posts
    Registered:
    02 Oct 2013
    22 Oct 2013 in reply to Ivan D. Dimitrov
    Link to this post
    @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.
  5. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    25 Oct 2013
    Link to this post
    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
  6. Owen
    Owen avatar
    4 posts
    Registered:
    02 Oct 2013
    25 Oct 2013 in reply to Ivan D. Dimitrov
    Link to this post
    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.
  7. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    30 Oct 2013
    Link to this post
    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
  8. Owen
    Owen avatar
    4 posts
    Registered:
    02 Oct 2013
    30 Oct 2013 in reply to Ivan D. Dimitrov
    Link to this post
    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.
  9. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    04 Nov 2013
    Link to this post
    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
9 posts, 0 answered