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

How to dynamically set child tab as selected

6 Answers 253 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Raka
Top achievements
Rank 1
Raka asked on 03 May 2012, 09:41 PM
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

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 04 May 2012, 04:56 AM
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.
0
Raka
Top achievements
Rank 1
answered on 07 May 2012, 01:55 PM
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.
0
Princy
Top achievements
Rank 2
answered on 08 May 2012, 06:30 AM
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.
0
Raka
Top achievements
Rank 1
answered on 08 May 2012, 03:27 PM
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
0
Accepted
Princy
Top achievements
Rank 2
answered on 09 May 2012, 05:06 AM
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.
0
Raka
Top achievements
Rank 1
answered on 09 May 2012, 01:15 PM
Thanks much Princy...  It is the 'SelectionIndex" on MultiView as your code pointed out.  I appreciate your help with this.
Tags
TabStrip
Asked by
Raka
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Raka
Top achievements
Rank 1
Share this question
or