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

Forums / Designing & Styling / radTabStrip showing selected tab when on a child page

radTabStrip showing selected tab when on a child page

2 posts, 0 answered
  1. Matt
    Matt avatar
    42 posts
    Registered:
    25 Jan 2012
    10 Jan 2013
    Link to this post
    Hello,
    I am using the radTabStrip control with a sitefinity data sitemap to display tabs for second level navigation on my site.  (very similar to the method described here.  So lets say I have the tabs
    Products  |  Services  |  Contact

    I only want to display the pages at this level in the tabs. I am doing this by setting the MaxDataBindDepth="1" in the widget properties.  The problem is, when I'm on a child page of 'Contact' the contact no longer shows as 'selected'.  If I increase the MaxDataBindDepth I get the styling result I want, where the parent tab 'Contact' is selected but now I have the problem that it's creating and displaying a tab for the child page which I do not want.

    My question is, is there an easy way with this control to only show one level, but still accurately display the parent tab as selected?

    Thanks in advance for your help!
    Matt
  2. Patrick Dunn
    Patrick Dunn avatar
    237 posts
    Registered:
    03 Nov 2014
    15 Jan 2013
    Link to this post
    Hi Matt,

     Thanks for using Sitefinity.

    I suppose that goes by what you define as easy.

    Here's one way to go about it, though:

    The idea is to grab the page title, find the parent page and its title, and then set the value to a hidden field. Using client side programming we can set the "selected" appearance to the appropriate parent page.

    <asp:HiddenField ID="hidden" runat="server" />

    and get the title / set it to the hidden field

    protected void Page_Load(object sender, EventArgs e)
            {
                var actualNode = SiteMapBase.GetActualCurrentNode();
                while (actualNode.ParentNode != null && actualNode.ParentNode.Title != "Pages")
                {
                    actualNode = actualNode.ParentNode as PageSiteNode;
      
                }
                         hidden.Value = actualNode.Title;
            }

    Then you can get the matching element with something like this:

    function TagMenu(targetClass, title) {
        var elems = document.getElementsByClassName(targetClass);
        for (i in elems)
        {
            if (elems[i].innerHTML == title)
            {
                //Do styling on menu here.
            }
        }
    }

    .rmText is the default class assigned to the span that is wrapped in the link for the menu. 

    I hope this helps!

    Regards,
    Patrick Dunn
    the Telerik team
    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
2 posts, 0 answered