How to selected the first child tab when I click the parent tab?

6 posts, 0 answers
  1. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 02 Oct 2009 Link to this post

    Hi,

    How to selected the first child tab when I click the parent tab?

    For example (please refer to coding below),

    When page load, the ParentTab1, ChildTab1 and pgView1 will be selected.
    When I click the ParentTab1, the ChildTab1 and pgView1 will be selected.
    When I click the ParentTab2, the ChildTabA and pgViewA will be selected.
    When I click the ParentTab3, the pgViewTab will be selected.

                  <telerik:RadTabStrip ID="rtsTab" runat="server" MultiPageID="rmpTab" ScrollChildren="true">  
                        <Tabs> 
                            <telerik:RadTab Text="ParentTab1" runat="server" Selected="true">  
                                <Tabs> 
                                    <telerik:RadTab Text="ChildTab1" PageViewID="pgView1" Selected="true">  
                                    </telerik:RadTab> 
                                    <telerik:RadTab Text="ChildTab2" PageViewID="pgView2">  
                                    </telerik:RadTab> 
                                </Tabs> 
                            </telerik:RadTab> 
                            <telerik:RadTab Text="ParentTab2" runat="server">  
                                <Tabs> 
                                    <telerik:RadTab Text="ChildTabA" PageViewID="pgViewA">  
                                    </telerik:RadTab> 
                                    <telerik:RadTab Text="childTabB" PageViewID="pgViewB">  
                                    </telerik:RadTab> 
                                    <telerik:RadTab Text="childTabC" PageViewID="pgViewC">  
                                    </telerik:RadTab> 
                                </Tabs> 
                            </telerik:RadTab> 
                            <telerik:RadTab Text="ParentTab3" runat="server" PageViewID="pgViewTab">  
                            </telerik:RadTab> 
                        </Tabs> 
                       </telerik:RadTabStrip> 
     
     
     
     
                   <telerik:RadMultiPage ID="rmpTab" runat="server">  
                         
                           <telerik:RadPageView ID="pgView1" runat="server" Selected="true">  
                              ParentTab1, ChildTab1     
                           </telerik:RadPageView> 
     
                   <telerik:RadPageView ID="pgView2" runat="server">  
                              ParentTab1, ChildTab2     
                           </telerik:RadPageView> 
              
                   <telerik:RadPageView ID="pgViewA" runat="server">  
                              ParentTab2, ChildTabA     
                           </telerik:RadPageView> 
     
                   <telerik:RadPageView ID="pgViewB" runat="server">  
                              ParentTab2, ChildTabB    
                           </telerik:RadPageView>             
     
                   <telerik:RadPageView ID="pgViewC" runat="server">  
                              ParentTab2, ChildTabC    
                           </telerik:RadPageView> 
     
                   <telerik:RadPageView ID="pgViewTab" runat="server">  
                              ParentTab3  
                           </telerik:RadPageView>                   
     
     
     
     
                   <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">  
                     <AjaxSettings> 
                            <telerik:AjaxSetting AjaxControlID="rtsTab">  
                                <UpdatedControls> 
                                        <telerik:AjaxUpdatedControl ControlID="rtsTab" /> 
                                        <telerik:AjaxUpdatedControl ControlID="rmpTab" /> 
                                </UpdatedControls> 
                            </telerik:AjaxSetting> 
                    </AjaxSettings> 
                       </telerik:RadAjaxManager>   


    Anyone can help?

    Thanks.

    Regards,
    Jessie
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Oct 2009 Link to this post

    Hello Jessie,

    Try attaching the OnClientTabSelected event and explicitly select the first child tab when clicking the parent item.

    JavaScript:
     
    <script type="text/javascript"
        function OnClientTabSelected(sender, args) { 
            var tabStrip = $find("<%= rtsTab.ClientID %>"); 
            if (args.get_tab().get_text() == "ParentTab2") { 
                var tab = tabStrip.findTabByText("ChildTabA"); 
                if (tab) { 
                    tab.select(); 
                } 
            } 
        } 
    </script> 

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 06 Oct 2009 Link to this post

    Hi Shinu,

    Thanks for your reply.

    I had tried your method but I can't get the result that I wanted.

    The problem is when I click the ParentTab2, the ChildTabA was not selected and displayed the pgViewB.
    What I need is when I click the ParentTab2, the ChildTabA is selected and will display pgViewA.


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestingTab.aspx.cs" Inherits="TestingTab" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
         
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
         
        <div> 
         
          <telerik:RadTabStrip ID="rtsTab" runat="server" MultiPageID="rmpTab" ScrollChildren="true">   
            <Tabs>  
                <telerik:RadTab Text="ParentTab1" runat="server" Selected="true">   
                    <Tabs>  
                        <telerik:RadTab Text="ChildTab1" PageViewID="pgView1" Selected="true">   
                        </telerik:RadTab>  
                        <telerik:RadTab Text="ChildTab2" PageViewID="pgView2">   
                        </telerik:RadTab>  
                    </Tabs>  
                </telerik:RadTab>  
                <telerik:RadTab Text="ParentTab2" runat="server">   
                    <Tabs>  
                        <telerik:RadTab Text="ChildTabA" PageViewID="pgViewA">   
                        </telerik:RadTab>  
                        <telerik:RadTab Text="childTabB" PageViewID="pgViewB">   
                        </telerik:RadTab>  
                        <telerik:RadTab Text="childTabC" PageViewID="pgViewC">   
                        </telerik:RadTab>  
                    </Tabs>  
                </telerik:RadTab>  
                <telerik:RadTab Text="ParentTab3" runat="server" PageViewID="pgViewTab">   
                </telerik:RadTab>  
            </Tabs>  
           </telerik:RadTabStrip>  
     
     
       <telerik:RadMultiPage ID="rmpTab" runat="server">   
              
               <telerik:RadPageView ID="pgView1" runat="server" Selected="true">   
                  ParentTab1, ChildTab1      
               </telerik:RadPageView>  
     
               <telerik:RadPageView ID="pgView2" runat="server">   
                  ParentTab1, ChildTab2      
               </telerik:RadPageView>  
     
               <telerik:RadPageView ID="pgViewA" runat="server">   
                  ParentTab2, ChildTabA      
               </telerik:RadPageView>  
     
               <telerik:RadPageView ID="pgViewB" runat="server">   
                  ParentTab2, ChildTabB     
               </telerik:RadPageView>              
     
               <telerik:RadPageView ID="pgViewC" runat="server">   
                  ParentTab2, ChildTabC     
               </telerik:RadPageView>  
     
               <telerik:RadPageView ID="pgViewTab" runat="server">   
                  ParentTab3   
               </telerik:RadPageView>    
                
       </telerik:RadMultiPage>                 
     
     
       <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">   
         <AjaxSettings>  
                <telerik:AjaxSetting AjaxControlID="rtsTab">   
                    <UpdatedControls>  
                            <telerik:AjaxUpdatedControl ControlID="rtsTab" />  
                            <telerik:AjaxUpdatedControl ControlID="rmpTab" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
        </AjaxSettings>  
       </telerik:RadAjaxManager>    
     
         
        </div> 
        </form> 
         
        <script type="text/javascript">  
            function OnClientTabSelected(sender, args) {  
                var tabStrip = $find("<%= rtsTab.ClientID %>");  
                if (args.get_tab().get_text() == "ParentTab2") {  
                    var tab = tabStrip.findTabByText("ChildTabA");  
                    if (tab) {  
                        tab.select();  
                    } 
                } 
            }  
        </script>  
     
    </body> 
    </html> 
     


    Thanks.

    Regards,
    Jessie
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 06 Oct 2009 Link to this post

    Hi Jessie,

    Here's your modified code snippet that shows the needed approach.

    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
     
        <script type="text/javascript"
            function OnClientTabSelected(sender, eventArgs) { 
                var tab = eventArgs.get_tab(); 
                if (tab.get_tabs().get_count() != 0) { 
                    tab.get_tabs().getTab(0).click(); 
                } 
            }   
        </script> 
     
        <div> 
            <telerik:RadTabStrip ID="rtsTab" runat="server" MultiPageID="rmpTab" ScrollChildren="true" 
                OnClientTabSelected="OnClientTabSelected"
                <Tabs> 
                    <telerik:RadTab Text="ParentTab1" runat="server" Selected="true"
                        <Tabs> 
                            <telerik:RadTab Text="ChildTab1" PageViewID="pgView1" Selected="true"
                            </telerik:RadTab> 
                            <telerik:RadTab Text="ChildTab2" PageViewID="pgView2"
                            </telerik:RadTab> 
                        </Tabs> 
                    </telerik:RadTab> 
                    <telerik:RadTab Text="ParentTab2" runat="server"
                        <Tabs> 
                            <telerik:RadTab Text="ChildTabA" PageViewID="pgViewA"
                            </telerik:RadTab> 
                            <telerik:RadTab Text="childTabB" PageViewID="pgViewB"
                            </telerik:RadTab> 
                            <telerik:RadTab Text="childTabC" PageViewID="pgViewC"
                            </telerik:RadTab> 
                        </Tabs> 
                    </telerik:RadTab> 
                    <telerik:RadTab Text="ParentTab3" runat="server" PageViewID="pgViewTab"
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
            <telerik:RadMultiPage ID="rmpTab" runat="server"
                <telerik:RadPageView ID="pgView1" runat="server" Selected="true"
                    ParentTab1, ChildTab1 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="pgView2" runat="server"
                    ParentTab1, ChildTab2 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="pgViewA" runat="server"
                    ParentTab2, ChildTabA 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="pgViewB" runat="server"
                    ParentTab2, ChildTabB 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="pgViewC" runat="server"
                    ParentTab2, ChildTabC 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="pgViewTab" runat="server"
                    ParentTab3 
                </telerik:RadPageView> 
            </telerik:RadMultiPage> 
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="rtsTab"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="rtsTab" /> 
                            <telerik:AjaxUpdatedControl ControlID="rmpTab" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
        </div> 
        </form> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 06 Oct 2009 Link to this post

    Hello Paul,

    I already tried your modified code snippet and this is the approach that I needed.

    Thanks for your help.

    Regards,
    Jessie

  7. Dawson
    Dawson avatar
    1 posts
    Member since:
    Dec 2011

    Posted 02 Dec 2011 Link to this post

    Thanks. This solved my similar problem and worked the first time I tried it.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017