More in this section

Forums / Developing with Sitefinity / Page Load event code

Page Load event code

8 posts, 0 answered
  1. Lino
    Lino avatar
    45 posts
    Registered:
    06 May 2005
    14 Jul 2007
    Link to this post
    Hi,

    I have a Masterpage that contains a radTabStrip.
    From pages inheriting from this masterpage, I would like to set the selectedindex of the radTabstripon the pageload event.
    I used to do this like this without SiteFinity:
     (Master.FindControl("RadTabStrip1") as RadTabStrip).SelectedIndex = 0;

    Where can I enter this in SiteFinity so that pages would set the correct SelectedIndex of the Masterpage's radTabStrip

    Thanks a million
    Lino
  2. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    15 Jul 2007
    Link to this post
    Not sure if this is what you talking about, but this is how I populate the tabstrip from the sitemap and then set the active tab on page load.

    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load  
            If Not Page.IsPostBack Then 
                SetActiveTab()  
            End If 
        End Sub 
     
        Private Sub SetActiveTab()  
            Try 
     
                Dim currentNode1 As SiteMapNode = SiteMap.CurrentNode  
                Dim parentNode1 As SiteMapNode = Nothing 
                Dim labelNode As SiteMapNode = Nothing 
                Dim treeNode As SiteMapNode = Nothing 
     
                For Each treeNode In SiteMap.RootNode.ChildNodes  
                    Dim tab As New Tab  
                    tab.Text = treeNode.Title  
                    tab.NavigateUrl = treeNode.Url  
                    Me.RadTabStrip1.Tabs.Add(tab)  
                Next 
     
                If Not currentNode1 Is Nothing Then 
                    While Not currentNode1 Is SiteMap.RootNode  
                        parentNode1 = currentNode1  
                        currentNode1 = currentNode1.ParentNode  
                    End While 
                End If 
     
                If Not parentNode1 Is Nothing Then 
     
                    Dim activeTab As New Telerik.WebControls.Tab  
                    activeTab = RadTabStrip1.FindTabByUrl(Me.ResolveUrl(parentNode1.Url))  
     
                    If Not activeTab Is Nothing Then                     
                        activeTab.Selected = True 
                    End If 
                End If 
     
            Catch ex As Exception  
     
            End Try 
     
     
        End Sub 


    Then prevent all but the top level from displaying setting display: none in the skin.

    If you need it in c# you can use the converter at http://converter.telerik.com/

    If you haven't already seen it, it's pretty cool.

    Sincerely,

    Ben
  3. Lino
    Lino avatar
    45 posts
    Registered:
    06 May 2005
    15 Jul 2007
    Link to this post
    Thanks Ben,

    I am not sure where to place that code. Sorry today is my first day in SiteFinity.
    I am a C# guy but can definitely read VB code so that is not the problem.
    Some of the my tabstrips defintely have child elements.
    If you go to my web site www.falafel.com you will be able to see the tabstrip being used there and some of them like Consulting and Products have sub tabstrips underneath them.

    I am trying to move the site to SiteFinity and believe it or not, I am almost done :) Great product!  Except I can not figure out where to tell the page when it loads that it needs to set the index for the current tabstrip.

    Thanks a million for any help especially if you could tell me where to place the code you have sent.

    Thanks again
    Lino
  4. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    15 Jul 2007
    Link to this post
    Hey sorry about the vagueness (sp) of that last post. Here is the way I do it on my site in a little more detail.

    1. Create a user control that has the code posted in the previous reply. The UserControl markup looks like:

    <radTS:RadTabStrip ID="RadTabStrip1" runat="server" DataSourceID="SiteMapDataSource1" ClickSelectedTab="true"></radTS:RadTabStrip>
    2. add the user control to the web.config "toolbox controls section".

    <add name="Main Menu" section="Alighten" url="~/UserControls/mainMenu.escro" description="Tabbed navigation for first level pages." />

    3. Then we edit a template that needs the tabstrip. We highlight the "Main Menu" and use the "select a container" dropdown to select the Content Place Holder that we want. and select add control.
    4. OK. we get an error unless we add a SiteMapDataSource onto the template. So go ahead and add one from the data category. The settings for the SiteMapDataSource are unchanged except: ShowStartingNode is set to false. This is because our home page is on the same level as our other main menu items.
    5. The Theme for this template is alighten. In the App_Themes folder we have a skin folder that contains the following:

    <%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="radTS" %> 
       
     <radTS:RadTabStrip   
        runat="server"   
        SkinsPath="~/App_Themes/alighten"   
        Skin="mainMenu">  
     </radTS:RadTabStrip> 

    I don't mean to be condescending, but I don't know how familiar you are with Telerik products. Notice the Skin "name". Because of the Skin "name" we need to copy a tabstrip "skin" folder from the RadControls folder to the /App_Themes/alighten/ folder. That folder will be titled "mainMenu". The css will need to be modified so that you change the name of every class in the styles.css of the Skin folder that copied to RadTabStip_mainMenu. Take a look at our Skin folders styles.css to see how we display only the first level tabs. You can use this as an example to display the first and second level tabs.

     
    .RadTabStrip_mainMenu  
    {  
        font: normal 11px arial, tahoma, sans-serif;  
        float: right;  
        padding-right: 20px;  
          
    }  
     
    .RadTabStrip_mainMenu .levelwrap  
    {  
    }  
     
    .RadTabStrip_mainMenu li a  
    {  
        display: none;  
    }  
    .RadTabStrip_mainMenu .level1 li a  
    {  
         display: block;  
    }  
    .RadTabStrip_mainMenu .level1 li a  
    {  
        background:transparent url('img/tabOffLeft.gif') 0px 0px no-repeat;   
        text-decoration: none;  
        line-height: 30px;   
        padding-left: 6px;  
    }  
     
    .RadTabStrip_mainMenu .level1 li a .wrap  
    {  
        background:transparent url('img/tabOffRight.gif') right no-repeat;    
        color: #ffffff;  
        font-family: Arial, Verdana;  
        font-size: 15px;  
        line-height: 30px;   
        padding-right: 6px;        
    }  
     
    .RadTabStrip_mainMenu .level1 li a .innerWrap  
    {  
        background:transparent url('img/tabOffMiddle.gif') 0px 0px repeat-x;  
        line-height: 30px;    
        padding: 0 10px 0 10px;  
    }  
     
    .RadTabStrip_mainMenu .level1 li a:hover  
    {  
        background:transparent url('img/tabOverLeft.gif') 0px 0px no-repeat;      
        text-decoration: none;  
        line-height: 30px;  
        padding-left: 6px;  
    }  
    .RadTabStrip_mainMenu .level1 li a:hover .wrap  
    {  
        background:transparent url('img/tabOverRight.gif') right no-repeat;   
        color: #ffffff;  
        font-family: Arial, Verdana;  
        font-size: 15px;     
        line-height: 30px;  
        padding-right: 6px;  
    }  
     
    .RadTabStrip_mainMenu .level1 li a:hover .innerWrap  
    {  
        background:transparent url('img/tabOverMiddle.gif') 0px 0px repeat-x;     
        line-height: 30px;  
        padding: 0 10px 0 10px;  
    }  
     
     
    .RadTabStrip_mainMenu .level1 li a.selected  
    {  
        background:transparent url('img/tabOnLeft.gif') 0px 0px no-repeat;    
        height: 30px;  
        text-decoration: none;  
        padding-left: 6px;  
    }  
    .RadTabStrip_mainMenu .level1 li a.selected .wrap  
    {  
        background:transparent url('img/tabOnRight.gif') right no-repeat;     
        color: #ffffff;  
        font-family: Arial, Verdana;  
        font-size: 15px;   
        line-height: 30px;  
        padding-right: 6px;    
    }  
     
    .RadTabStrip_mainMenu .level1 li a.selected .innerWrap  
    {  
        background:transparent url('img/tabOnMiddle.gif') 0px 0px repeat-x;  
        line-height: 30px;  
        padding: 0 10px 0 10px;  


    The most important items are:
    1. The UserControl with RadTabStrip and codebehind to populate it. Which you have from a previous post.
    2. The SiteMapDataSource with the correct ID.
    3. The Skin file in our masterpage Theme
    4. The Skin folder that is used to style our tabs and display only the levels we want.

    We try to minimize the number of item that we add to the .master directly that is why we end up with quite a few UserControls. There are many ways to skin this cat. You could add the tab strip and SiteMapDataSource directly to your .master instead of using the Sitefinity UI. Or add both to the same UserControl.

    I hope I didn't oversimplify and annoy. The Sitefinity guys and gal (that's for Rebecca) may have a better explanation for what you need to get this done. However, this is how we have done it in a soon to be released web site near you. Please do not hesitate to contact me if you have any questions. Also, if you would like me to send a sample project with this just email me at info@alighten.com and I will post one to an FTP account for you.

    Sincerely,

    Ben

  5. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    15 Jul 2007
    Link to this post
    Woops.

    I just realized you can get rid of the DataSourceID from you TabStrip in the UserControl and also get rid of the SiteMapDataSource from the templates because the codebehind is using the built in SiteMap.

    Sincerely,

    Ben
  6. Lino
    Lino avatar
    45 posts
    Registered:
    06 May 2005
    15 Jul 2007
    Link to this post
    Thanks a million Ben,

    I got it to work just fine with the SiteMapDataSource and some tweaking to the ASCX.
    Thank you so much for your time and help

    Cheers
    Lino Tadros
  7. UI Crew
    UI Crew avatar
    99 posts
    Registered:
    24 Sep 2012
    16 Jul 2007
    Link to this post
    Hi,

    Doesn't the new "Site Nav" controls including in SP 2 do this automatically?

    Seth
  8. Vassil Daskalov
    Vassil Daskalov avatar
    261 posts
    Registered:
    18 May 2013
    16 Jul 2007
    Link to this post
    Hello Seth Cleaver,

    Yeah, indeed the SP2 SiteTabStrip implements the functionality to show the tab strip hierarchically. This is realized through the ShowFirstLevel property. Though there is no hierarchy depth option (which should determine to which level the tabstrip should be binded) it is easy to implement that functionality.

    This can be achieved by adding an integer property which would determine the depth of the binding, like this:

    private int _hierarchyDepth = -1;  
     
        [Category("Behavior")]  
        public int HierarchyDepth  
        {  
            get 
            {  
                return this._hierarchyDepth;  
            }  
            set 
            {  
                this._hierarchyDepth = value;  
            }  
        } 

    And modifying the FillTabStrip function like this:

    private void FillTabStrip(SiteMapNode pNode, TabCollection pTabs, int levelDepth)  
        {  
            int levelPosition = -1;  
            foreach (CmsSiteMapNode node in pNode.ChildNodes)  
            {  
                levelPosition++;  
     
                Tab tab = new Tab(node.Title);  
                tab.NavigateUrl = node.Url;  
                pTabs.Add(tab);  
                if (node == SiteMap.CurrentNode)  
                {  
                    tab.Selected = true;  
                    tab.Owner.SelectedIndex = levelPosition;  
                    if (levelDepth > this._hierarchyDepth)  
                        tab.Visible = false;  
                }  
     
                this.FillTabStrip(node, tab.Tabs, levelDepth + 1);  
     
                if (tab.SelectedIndex >= 0)  
                    tab.Owner.SelectedIndex = levelPosition;  
            }  
        } 

    The calling code should also be modified by adding one more argument with 0 value:

    FillTabStrip(SiteMap.RootNode, this.RadTabstrip1.Tabs, 0);

    I am attaching the modified file as well.


    All the best,

    Vassil Daskalov
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
8 posts, 0 answered