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

Forums / Developing with Sitefinity / TabStrip menu with Unique Tab Appearance

TabStrip menu with Unique Tab Appearance

3 posts, 1 answered
  1. Flavio Cometto
    Flavio Cometto avatar
    14 posts
    Registered:
    17 Oct 2009
    23 Feb 2010
    Link to this post
    Hi all,
    taking a cue from the example TabStrip - Unique tab apperance at Telerik site, I need to change the appearance of each menu item depending on the page group. For example: there are 3 groups: community, forums, blogs. The first is red, the second is blue and the third is green. Change the appearance is quite clear: in page_load event of SiteTabstrip.ascx user control, programmatically, I change Custom CSS class of each tabstrip node. The problem is how dynamically associate different style to different page group. Is there a way to set an attribute (eg: a page category) during page creation and read it during the construction of the menu?

    Thank You in advance

    Flavio
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    23 Feb 2010
    Link to this post
    Hi Flavio Cometto,

    Thank you for using our services.

    Unfortunately pages or page groups do not have this kind of feature. However you can simply add a few lines of code so that if the page is a page group the tab strip or menu item representing it (depending on which navitation control you use) will get a class name the same as the name of the page for example. Then all you need to do is to provide rules for those classes. Lets take for example the SiteTabStrip. Add this to the page load and the FillTabStrip to achieve desired result:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.ShowOnlyFirstLevel)
        {
            SiteMapNode rootNode = SiteMap.RootNode;
            foreach (SiteMapNode node1 in rootNode.ChildNodes)
            {
     
                RadTab tab = new RadTab();
                if (((CmsSiteMapNode)node1).CmsPage.PageType == CmsPageType.Group)
                {
                    tab.CssClass = ((CmsSiteMapNode)node1).CmsPage.Name;
                    tab.SelectedCssClass = string.Concat(((CmsSiteMapNode)node1).CmsPage.Name, "Selected");
                    tab.HoveredCssClass = string.Concat(((CmsSiteMapNode)node1).CmsPage.Name, "Hovered");
                }
                tab.Text = node1.Title;
                tab.NavigateUrl = node1.Url;
                this.RadTabstrip1.Tabs.Add(tab);
            }
     
            CmsSiteMapNode currentNode = SiteMap.CurrentNode as CmsSiteMapNode;
     
            if (currentNode != null && currentNode.ParentNode != null)
            {
                while (currentNode.ParentNode != rootNode)
                {
                    CmsSiteMapNode tempNode = currentNode.ParentNode as CmsSiteMapNode;
                    if (tempNode == null)
                        break;
                    currentNode = tempNode;
                }
                RadTab item = this.RadTabstrip1.FindTabByUrl(this.ResolveUrl(currentNode.Url));
                if (item != null)
                {
                    // here you can set the style for the top-level item  
                    item.Selected = true;
                }
            }
            else if (this.RadTabstrip1.Tabs.Count > 0)
            {
                this.RadTabstrip1.Tabs[0].Selected = true;
            }
        }
        else
        {
            SiteMapNode root = this.GetStartingNode();
            FillTabStrip(root, this.RadTabstrip1.Tabs, 0);
        }
    }
     
    private void FillTabStrip(SiteMapNode pNode, RadTabCollection pTabs, int levelDepth)
    {
        int levelPosition = -1;
        foreach (CmsSiteMapNode node in pNode.ChildNodes)
        {
            levelPosition++;
     
            RadTab tab = new RadTab(node.Title);
            tab.NavigateUrl = node.Url;
            if (node.CmsPage.PageType == CmsPageType.Group)
            {
                tab.CssClass = node.CmsPage.Name;
                tab.SelectedCssClass = string.Concat(node.CmsPage.Name, "Selected");
                tab.HoveredCssClass = string.Concat(node.CmsPage.Name, "Hovered");
            }
            pTabs.Add(tab);
            if (node == SiteMap.CurrentNode)
            {
                tab.Selected = true;
                tab.Owner.SelectedIndex = levelPosition;
            }
     
            if (levelDepth > this.HierarchyDepth && this.HierarchyDepth != -1)
                tab.Visible = false;
     
            if (levelDepth == this.HideLevel)
                tab.Style.Add(HtmlTextWriterStyle.Display, "none");
     
            this.FillTabStrip(node, tab.Tabs, levelDepth + 1);
     
            if (tab.SelectedIndex >= 0)
                tab.Owner.SelectedIndex = levelPosition;
        }
    }

    This should do the trick. 

    Best wishes,
    Radoslav Georgiev
    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.
    Answered
  3. Flavio Cometto
    Flavio Cometto avatar
    14 posts
    Registered:
    17 Oct 2009
    23 Feb 2010
    Link to this post
    Hi Radoslav,
    many thanks for your fast response. Your suggestion to use "by convention" approach it was very helpful for me.

    Best regards.

    Flavio
Register for webinar
3 posts, 1 answered