How to dynamically set child tab as selected

7 posts, 1 answers
  1. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 03 May 2012 Link to this post

    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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 07 May 2012 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 May 2012 Link to this post

    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.
  6. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 08 May 2012 Link to this post

    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
  7. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 May 2012 Link to this post

    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.
  8. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 09 May 2012 Link to this post

    Thanks much Princy...  It is the 'SelectionIndex" on MultiView as your code pointed out.  I appreciate your help with this.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017