This is a migrated thread and some comments may be shown as answers.

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

5 Answers 161 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jessie
Top achievements
Rank 1
Jessie asked on 02 Oct 2009, 07:45 AM
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

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 05 Oct 2009, 08:01 AM
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.
0
Jessie
Top achievements
Rank 1
answered on 06 Oct 2009, 09:12 AM
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
0
Paul
Telerik team
answered on 06 Oct 2009, 10:49 AM
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.
0
Jessie
Top achievements
Rank 1
answered on 07 Oct 2009, 02:32 AM
Hello Paul,

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

Thanks for your help.

Regards,
Jessie

0
Dawson
Top achievements
Rank 1
answered on 02 Dec 2011, 11:57 PM
Thanks. This solved my similar problem and worked the first time I tried it.
Tags
TabStrip
Asked by
Jessie
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Jessie
Top achievements
Rank 1
Paul
Telerik team
Dawson
Top achievements
Rank 1
Share this question
or