How to dynamically set child tab as selected

[Raka]

Hi -- We have a RadTabStrip control with few tabs.  Under most tabs there are sub-tabs.  We want to dynamically select a tab when the page loads.  Based on this selected tab, the sub-tab should be selected.  I know how to set the tab as selected on the main tab but not having much luck with setting the child tab. 

So, for our example, I am setting the third tab on main tab strip as selected when the page loads.  This part works.
Now I want to set the 5th child tab of this selected tab as highlighted. Can't figure out how to do it. 

What's happening is that the third tab on main shows up as highlighted.  However it is showing the child tabs of first tab below it.



Can someone please help?

Thanks

[Princy]

Hi Shalini,

Try the following code snippet that works for me as expected.

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        RadTabStrip1.Tabs[2].Selected = true;
        RadTabStrip1.Tabs[2].Tabs[4].Selected = true;
    }

Hope this helps.

Thanks,
Princy.

[Raka]

Hello Princy

Thanks for your suggestion.  It seems like it should work, but it doesn't.  It doesn't seem to think that there are any tabs in RadTabStrip1.Tabs[2] collection!  That is probably the problem. 

Here's what I am doing to create the tab hierarchy and
when I look at RadTabStrip1.Tabs.Count - it gives me the correct number. 
However RadTabStrip1.Tabs[2].Tabs.Count yiesds 0 when it should be 2 for this example code.

What am I doing wrong in creating the tabs?

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="rmp1"

CausesValidation="false" OnClientTabSelected="myTabSelected" OnClientTabSelecting="onTabSelecting"

OnTabClick="RadTabStrip1_TabClick">

    <Tabs>

 

        <telerik:RadTab Text="Tab1" Value="Tab1" State="loaded" PageViewID="rpvTab1">

        </telerik:RadTab>
        <telerik:RadTab Text="Tab2" Value="Tab2" State="unloaded" PageViewID="rpvTab2">
        </telerik:RadTab>
        ...

     </Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmp1" runat="server" SelectedIndex="0">
    <telerik:RadPageView ID="rpvTab1" runat="server">
       <div>
           <telerik:RadTabStrip ID="rtsPI" runat="server" SelectedIndex="0" MultiPageID="rmpPI"        
            CausesValidation="false" OnClientTabSelected="myTabSelected">
               <Tabs>
                   ...
               </Tabs>
           </telerik:RadTabStrip>
       </div>
    </telerik:RadPageView>

    <telerik:RadPageView ID="rpvTab2" runat="server">
        <div>
            <telerik:RadTabStrip ID="rtsCI" runat="server" SelectedIndex="0" MultiPageID="rmpCI"
             CausesValidation="false" OnClientTabSelected="myTabSelected">
                <Tabs>
                    <telerik:RadTab Text="ChildTab1" Value="ChildTab1"></telerik:RadTab>
                    <telerik:RadTab Text="ChildTab2" Value="ChildTab2"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>

            <telerik:RadMultiPage ID="rmpCI" runat="server" SelectedIndex="0">
                <telerik:RadPageView ID="rpvChildTab1" runat="server">
                    <asp:Label ID="lblTest" text="Text" runat="server"></asp:Label>
                <telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
    </telerik:RadPageView>
</telerik:RadMultiPage>

Thanks.

[Princy]

Hi Shalini,

I suppose that you want to set "ChildTab2" as selected. Please take a look into the following code snippet and the screenshot.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="rmp1" CausesValidation="false">
   <Tabs>
      <telerik:RadTab Text="Tab1" Value="Tab1" PageViewID="rpvTab1">
      </telerik:RadTab>
      <telerik:RadTab Text="Tab2" Value="Tab2" PageViewID="rpvTab2">
      </telerik:RadTab>
   </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="rmp1" runat="server">
   <telerik:RadPageView ID="rpvTab1" runat="server">
        <telerik:RadTabStrip ID="rtsPI" runat="server"  MultiPageID="rmpPI" CausesValidation="false" >
            <Tabs>
               <telerik:RadTab Text="Tab3" Value="Tab3" >
               </telerik:RadTab>
               <telerik:RadTab Text="Tab4" Value="Tab4" >
               </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
   </telerik:RadPageView>
   <telerik:RadPageView ID="rpvTab2" runat="server">
        <telerik:RadTabStrip ID="rtsCI" runat="server" CausesValidation="false">
            <Tabs>
               <telerik:RadTab Text="ChildTab1" Value="ChildTab1">
               </telerik:RadTab>
               <telerik:RadTab Text="ChildTab2" Value="ChildTab2">
               </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </telerik:RadPageView>
</telerik:RadMultiPage>
<telerik:RadMultiPage ID="rmpCI" runat="server" SelectedIndex="0">
    <telerik:RadPageView ID="rpvChildTab1" runat="server">
        <asp:Label ID="lblTest" Text="Text" runat="server"></asp:Label>
    </telerik:RadPageView>
</telerik:RadMultiPage>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        RadTabStrip1.Tabs[1].Selected = true;
        RadPageView pageview = (RadPageView)rmp1.FindPageViewByID("rpvTab2");
        pageview .Selected = true;
        RadTabStrip tabstrip= (RadTabStrip)pageview .FindControl("rtsCI");
        tabstrip.Tabs[1].Selected = true;
    }

Please elaborate your scenario by providing a screenshot if it doesn't helps.

Thanks,
Princy.

[Raka]

Hello Princy

This works almost perfectly!  Thank you so much for taking the time to create such a nice example code. 
It now selects (highlights) the appropriate main and child tabs.  The only thing is that even though it is selecting "ChildTab2", the content that it shows under it belongs to ChildTab1.  I can't understand why that is. 

For my case, though, this is good enough since I always want to select the first child tab of the tab selected on main tab strip. 
I am just curious why it doesn't show the correct tab-content.

Thanks much
Shalini

[Princy]

Hi Shalini,

I suppose that you don't want the Label to be selected while selecting ChildTab2. Please take a look into the following code snippet and screenshot.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="rmp1" CausesValidation="false">
   <Tabs>
      <telerik:RadTab Text="Tab1" Value="Tab1" PageViewID="rpvTab1">
      </telerik:RadTab>
      <telerik:RadTab Text="Tab2" Value="Tab2" PageViewID="rpvTab2">
      </telerik:RadTab>
   </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="rmp1" runat="server">
   <telerik:RadPageView ID="rpvTab1" runat="server">
        <telerik:RadTabStrip ID="rtsPI" runat="server"  MultiPageID="rmpPI" CausesValidation="false" >
            <Tabs>
               <telerik:RadTab Text="Tab3" Value="Tab3" >
               </telerik:RadTab>
               <telerik:RadTab Text="Tab4" Value="Tab4" >
               </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
   </telerik:RadPageView>
   <telerik:RadPageView ID="rpvTab2" runat="server">
        <telerik:RadTabStrip ID="rtsCI" runat="server" CausesValidation="false"  MultiPageID="rmpCI">
            <Tabs>
               <telerik:RadTab Text="ChildTab1" Value="ChildTab1" PageViewID="rpvChildTab1">
               </telerik:RadTab>
               <telerik:RadTab Text="ChildTab2" Value="ChildTab2">
               </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </telerik:RadPageView>
</telerik:RadMultiPage>
<telerik:RadMultiPage ID="rmpCI" runat="server">
    <telerik:RadPageView ID="rpvChildTab1" runat="server">
        <asp:Label ID="lblTest" Text="Text" runat="server"></asp:Label>
    </telerik:RadPageView>
</telerik:RadMultiPage>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        RadTabStrip1.Tabs[1].Selected = true;
        RadPageView pageview = (RadPageView)rmp1.FindPageViewByID("rpvTab2");
        pageview .Selected = true;
        RadTabStrip tabstrip= (RadTabStrip)pageview .FindControl("rtsCI");
        tabstrip.Tabs[1].Selected = true;
    }

Hope this helps.

Thanks,
Princy.

[Raka]

Thanks much Princy...  It is the 'SelectionIndex" on MultiView as your code pointed out.  I appreciate your help with this.