Auto-default child tab when selecting root tab

4 posts, 0 answers
  1. Kevin Mason
    Kevin Mason avatar
    13 posts
    Member since:
    Jan 2007

    Posted 17 Feb 2012 Link to this post

    have a hierarchical (nested) (multi-level) tabstrip with root tabs (level 1) and child tabs (level 2).  How do I auto select a child tab be default auto-selected child tab when I select a root tab??
    thanks
  2. Kevin Mason
    Kevin Mason avatar
    13 posts
    Member since:
    Jan 2007

    Posted 17 Feb 2012 Link to this post

    Use of SELECTEDINDEX = 0 in the ROOT Tab auto selected the first CHILD tab on clicking the ROOT tab, BUT does not load the CHILD tab page... still have to click on the CHILD tab to open the page linked to the CHILD Tab.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Feb 2012 Link to this post

    Hi Kevin,

    You can use some javascript in order select the desired page on OnClientTabSelected client-side event. You can refer to the below help articles for more information on how to use the event and the set the desired page as selected:

    www.telerik.com/help/aspnet-ajax/tabstrip-onclienttabselected.html 
    www.telerik.com/help/aspnet-ajax/tabstrip-mutlipage-client-object.html
    www.telerik.com/help/aspnet-ajax/tabstrip-multipage-radpageview-client-object.html

     

    Kind regards,
    Kate
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Kevin Mason
    Kevin Mason avatar
    13 posts
    Member since:
    Jan 2007

    Posted 19 Feb 2012 Link to this post

    After some trial and error, this worked.  After Client side click which selects the child tab, then I get the navigate url and load.
    This works in VB ASP.NET AJAX web project. 
    In CS ASP.NET AJAX web project, the child row of tabs disappear when the document.location.href = url fires.
    I do not know enought about CS to fix that problem.
    <table style="width: 1000px">
    <%-- Script automates loading the first child tab content when a parent tab with children is clicked --%>
    <script type="text/javascript">
      function ClientTabSelectedHandler(sender, eventArgs) {
        var tabStrip = sender;
        var tab = eventArgs.get_tab();
          if (tab.get_tabs().get_count() > 0) {
            tab.get_tabs().getTab(0).click();
            var url = tab.get_tabs().getTab(0).get_navigateUrl();
            document.location.href = url;
        }
      }
    </script>
      <tr>
        <td>
        <TRad:RadTabStrip id="RadTabStrip" runat="server" Height="56px" Skin="Outlook" EnableViewState="False" OnClientTabSelected="ClientTabSelectedHandler">
          <Tabs>
            <TRad:RadTab runat="server" Text="RootTabLevel0Tab0" NavigateUrl="~/Tabs/Home.aspx"></TRad:RadTab>
            <TRad:RadTab runat="server" Text="RootTabLevel0Tab1">
             <Tabs>
                <TRad:RadTab runat="server" Text="ChildTabLevel1Tab0" NavigateUrl="~/Tabs/ChildTabContent0.aspx"></TRad:RadTab>
                <TRad:RadTab runat="server" Text="ChildTabLevel1Tab1" NavigateUrl="~/Tabs/ChildTabContent1.aspx"></TRad:RadTab>
                <TRad:RadTab runat="server" Text="ChildTabLevel1Tab2" NavigateUrl="~/ Tabs/ChildTabContent2.aspx"></TRad:RadTab>
              </Tabs>
            </TRad:RadTab>
          </Tabs>
        </TRad:RadTabStrip>
      </td>
      </tr>
      </table>
Back to Top