Highlight current page - General Discussions - General Discussions - Progress Community
 General Discussions

Highlight current page

  • Highlight current page
  • Hey guys.

    I'm using sitefinity for the first time and creating a theme for a new website.

    I was wondering how to get a class added to the current page's nav item?

    Am I missing something obvious, or is this missing as a feature?

    Cheers.
  • Hello matt,

    If you wan this class to apply only for the current page, you have to get the SiteMap node

    SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;

    Them cast it to a type of the items collection of your navigation ( for instance RadMenuItem) and set CssClass property.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • I'm using the built in navigation stuff, I'm not a dotnet developer, I do all the front end (html, css, js).

    Could you possibly dumb down what you just suggested for me? lol.

    Thanks.
  • 216506_navigationcontrol.png
    Hello matt,

    You could do the following.

    Open Navigation control for edition. 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.

    sample

    <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"
                    
     
                
            
        

    Under advanced tab of the designer you could set template path property for an existing mode.


    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Thanks for your help :)
  • Hi,

    Can you tell me "How to apply classes for the primary navigation when you are clicking the sub pages in left navigation"?

    I need to highlight the primary menu while you are clicking the left menu..

    Thanks,
    sathya
  • Hello sathiyaseelan,

    If you rebind the items from your primary navigation inside a method where you have access to the data item you set a public property which will set the css class to the current item or any other item .

    All the best,
    Ivan Dimitrov
    the Telerik team

  • Hi,

    can you give me an example...

    right now i have done this which sets class for the current node.

                SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;
                if (currentNode != null)
               
                    var item = RadPanelbar1.FindItemByUrl(Page.ResolveUrl(currentNode.Url));
                    
                    if (item != null)
                   
                        item.Selected = true;
                        item.SelectedCssClass = "rtsSelected";
                   

               

    To apply class the same class when we are clicking the sub pages inside this current page what I need to do?

    Thanks,
    sathya
  • Hi sathiyaseelan,

    Setting a class for a RadPanelItem is the same for each node. You need to pass the page to FindItemByUrl or FindItemByText and then set the css. There are client side methods 

    findItemByText
    findItemByUrl

    that you can also use.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

  • Can we get this as a PITS feature request for the nav control?  Should be too bloaty to add a single css class to the current page...?
  • @Steve, couldn't agree with you more, but this shouldn't be added to PITS, instead added to code right away (aka let's not slow it down). I've always been amazed by this one, that you have to get into code to style the current page/menu item. If that isn't a common requirement to let users know where they are in a site I don't know what is.

    Phill
  • @Phil furthermore, there should be a dedicated SF Sitemap control which auto-implements knowing about "ShowInNavigation" for us :)
  • Hi Steve,

    I have added an item in PITS for the current page CSS class for current page. Please note that we have two modes for sitemap generation - in rows and columns, both use RadSiteMap control.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

  • Hi there, I have exactly the same issue as Matt except I know far less than he does. :) I have already implemented the menu and do not want to lose all the work I did, just to add a class. Will this happen if I follow your method?

    Also, surely there is an easier way to do this? What happens when your customers aren't familiar with C# or .net? Your first answer for Matt clearly requires specialised knowledge and for such a basic feature. For people like me this is very frustrating, especially considering this is a something I have to do regularly.