Hierarchical tab selection in page load

7 posts, 0 answers
  1. Sharon
    Sharon avatar
    9 posts
    Member since:
    Feb 2009

    Posted 10 Jun 2009 Link to this post

    I have a hierarchical tab, by default this is how my tab structure is rendered,

    Tab1  Tab2  Tab3  Tab4
    Tab1.1 Tab1.2  Tab1.3 Tab1.4
    Tab1.1.1 Tab1.1.2

    but in page load I want my tab to render this way, and want Tab2.7.1 selected,

    Tab1 Tab2 Tab3 Tab4
    Tab2.1 Tab2.2 Tab2.3 Tab2.4 Tab2.5 Tab2.6 Tab2.7
    Tab2.7.1 Tab2.7.2 Tab2.3

    Please do help me in solving this issue.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2009 Link to this post

    Hi Sharon,

    Try the following client side code and see whether it helps.

    ASPX:
     
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="1">  
        <Tabs> 
            <telerik:RadTab runat="server" Text="Tab1">  
                <Tabs> 
                    <telerik:RadTab runat="server" Text="Tab 1.1">  
                    </telerik:RadTab> 
                    <telerik:RadTab runat="server" Text="Tab 1.2">  
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Tab2" Selected="True">  
                <Tabs> 
                     . . .  
                    <telerik:RadTab runat="server" Text="Tab 2.7">  
                        <Tabs> 
                            <telerik:RadTab runat="server" Text="Tab 2.7.1">                              
                            </telerik:RadTab> 
                            <telerik:RadTab runat="server" Text="Tab 2.7.2">  
                            </telerik:RadTab> 
                        </Tabs> 
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTab> 
             . . .  
        </Tabs> 
    </telerik:RadTabStrip> 

    JavaScript:
     
    <script type="text/javascript">  
    function pageLoad()  
    {  
        var tabStrip= $find("<%= RadTabStrip1.ClientID %>");  
        var tab = tabStrip.findTabByText("Tab 2.7.1");  
        if(tab)     
        {    
            if(tab.get_level() != 0)    
            {    
                var parentItem = tab;    
                    
                for(var i = 0; parentItem.get_level() >0; i++)    
                {    
                    parentItem = parentItem.get_parent();    
                    parentItem.set_selected(true);                      
                }                    
            }         
            tab.set_selected(true);    
        }  
    }  
    </script> 

    Thanks,
    Princy.
  3. Sharon
    Sharon avatar
    9 posts
    Member since:
    Feb 2009

    Posted 10 Jun 2009 Link to this post

    Hi Princy,
    Thanks for your reply and it worked like a gem but, I want this client side code to be called only when my page is not posted back.

    Thanks,
    Sharon.
  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 11 Jun 2009 Link to this post

    Hello Sharon,

    Just rename the pageLoad() function and call it whenever you need it. pageLoad() is a shortcut for the Sys.Application.load event. For details on the matter please refer to the following ASP.NET article.

    Best wishes,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Sharon
    Sharon avatar
    9 posts
    Member since:
    Feb 2009

    Posted 11 Jun 2009 Link to this post

    HI Paul,
    I tried doing that, renaming the function as myfunction() and calling it from the codebehind. I end up getting a script errror null is not an object. I fired alerts to check how far the script is excuted, the function is called, but it does not give the client id of my radstrip.

    Please help.....

    Thanks,
    Sharon Johnson
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Jun 2009 Link to this post

    Hi Sharon,

    Try adding Sys.Application.add_load() method for calling the client side function from code behind, and see whether it is working fine.

    CS:
     
    string script = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(myfunction);</script>"
    ClientScript.RegisterStartupScript(this.GetType(), "myfunction", script);  

    Thanks,
    Shinu.
  7. Sharon
    Sharon avatar
    9 posts
    Member since:
    Feb 2009

    Posted 11 Jun 2009 Link to this post

    I tried your code but I end up with the same situation I'm not able to select any other tab, the function is getting called on each post back I want that to be called the first time and not during every post back

    this is my page load
     protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string script = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(myfunction);</script>";
                ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "myfunction", script, false);
            }
       }

    this is my script

    <script type="text/javascript">  
    function myfunction()  
    {   
        
        var tabStrip= $find("<%= langcate_tab.ClientID %>");    
        var tab = tabStrip.findTabByText("Ek Nayee Zindagi");     
        if(tab)     
        {    
            if(tab.get_level() != 0)    
            {    
                var parentItem = tab;    
                    
                for(var i = 0; parentItem.get_level() >0; i++)    
                {    
                    parentItem = parentItem.get_parent();    
                    parentItem.set_selected(true);                      
                }                    
            }         
            tab.set_selected(true);     
        }
    }  
    </script>


    I get runtime error when I use ClientScript, so I used ScriptManager.RegisterStartupScript.


    Thanks,
    Sharon.

Back to Top