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

[Jessie]

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

[Shinu]

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.

[Jessie]

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

[Paul]

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.

[Jessie]

Hello Paul,

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

Thanks for your help.

Regards,
Jessie

[Dawson]

Thanks. This solved my similar problem and worked the first time I tried it.