Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Tabstrip > Selcting a Tab not visible on the screen

• Lakshman Venkat

  Posted on Jan 9, 2008 (permalink)

  Hi.

  I have the following tab structure in my page.

  Tab Definition

  <div id="MainArea" class="ExportHeaderDiv">
          <radTS:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Outlook" SelectedIndex="0"
              ScrollChildren= "True" PerTabScrolling="True" ScrollButtonsPosition="Right"
              MultiPageID="RadMultiPage1">
              <Tabs>
                  <radTS:Tab ID="Tab1" runat="server" Text="Tab One"  TabIndex="0" PageViewID="General">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab2" runat="server" Text="Tab two" TabIndex="1" PageViewID="LoanTerms">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab3" runat="server" Text="Tab Three" PageViewID="VariableRate">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab4" runat="server" Text="Tab four" PageViewID="ARM">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab5" runat="server" Text="Tab Five" PageViewID="AdjustingAccount">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab6" runat="server" Text="Tab Six" PageViewID="Billing">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab7" runat="server" Text="Tab Seven" PageViewID="RegP">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab9" runat="server" Text="Tab Eight" PageViewID="Participation">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab10" runat="server" Text="Tab Nine" PageViewID="PMI">
                  </radTS:Tab>
                 
                  <radTS:Tab ID="Tab11" runat="server" Text="Tab Ten" PageViewID="AMI">
                      <Tabs>
                          <radTS:Tab ID="Tab20" runat="server" Text="Tab 10.1" PageViewID="Property">
                          </radTS:Tab>
                          <radTS:Tab ID="Tab21" runat="server" Text="Tab 10.2" PageViewID="Loan">
                          </radTS:Tab>
                          <radTS:Tab ID="Tab22" runat="server" Text="Tab 10.3" PageViewID="MortgageInsuranceCodes">
                          </radTS:Tab>
                          <radTS:Tab ID="Tab23" runat="server" Text="Tab 10.4 PageViewID="AffordableHousingInitiative">
                          </radTS:Tab>
                          <radTS:Tab ID="Tab24" runat="server" Text="Tab 10.5" PageViewID="Underwriting">
                          </radTS:Tab>
                          <radTS:Tab ID="Tab25" runat="server" Text="Tab 10.6" PageViewID="SBA">
                          </radTS:Tab>
                      </Tabs>
                  </radTS:Tab>
                 
                  <radTS:Tab ID="Tab12" runat="server" Text="Tab eleven" PageViewID="HDMA">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab13" runat="server" Text="Tab Tweleve" PageViewID="LineOfCredit">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab26" runat="server" Text="Tab thirteen" PageViewID="CRA">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab14" runat="server" Text="Tab fourteen" PageViewID="InsuranceInformation">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab15" runat="server" Text="Tab Fifteen" PageViewID="ODP">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab16" runat="server" Text="Tab sixteen" PageViewID="EQ">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab17" runat="server" Text="Tab Seventeen" PageViewID="ProgrammerCodes">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab18" runat="server" Text="Tab Eighteen" PageViewID="UserDefined">
                  </radTS:Tab>
                  <radTS:Tab ID="Tab19" runat="server" Text="Tab Nineteen" PageViewID="SpecialInformation">
                  </radTS:Tab>
              </Tabs>
          </radTS:RadTabStrip>

  Javascript to Selct the Tab

   

  <script type="text/javascript" language="javascript">

   

  function NavigateTo(tabIndex)

  {

   

  var tab1 = <%= RadTabStrip1.ClientID %>.Tabs[tabIndex];

  tab1.Select();

  }

   

  </script>

   

  It works fine if the Tab is Visible on the screen. I am using Javascript to select the tab when the user makes the selection. It works fine if the Tab is Visible on the page. For me one time only 11-12 tabs are visible on the screen. The problem occurs when the user try to select the tab which are not visible on the screen. It just shows the PageView when the javascript function executes but doesn't select the correct tab. For e.g If the Tab# 15 is not visible on the screen when the user tries to select the #15 it shows the PageView which is corresponding to the Tab #15 but not the Tab #15. Appreciate any help.

  Lak

• Paul Paul

  Posted on Jan 9, 2008 (permalink)

  Hello Lakshman,
  
  Please find below a sample code snippet that demonstrates the needed approach.
  
  

  <body>

  <form id="form1" runat="server">

  <script type="text/javascript">

  function SetScrollPosition()

  {

  var myTab = <%= RadTabStrip1.ClientID %>.FindTabByText("Root Tab 14");

  myTab.Select();

  var selectedTab = <%=RadTabStrip1.ClientID %>.SelectedTab;

  selectedTab.TabStrip.Scroll.ScrollBy(-selectedTab.DomElement.offsetLeft);

  }

  </script>

  <radTS:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="True" Width="500px">

  <Tabs>

  <radTS:Tab ID="Tab1" runat="server" Text="Tab1">

  </radTS:Tab>

  <radTS:Tab ID="Tab2" runat="server" Text="Tab2">

  </radTS:Tab>

  <radTS:Tab ID="Tab3" runat="server" Text="Tab3">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 4">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 5">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 6">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 7">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 8">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 9">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 10">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 11">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 12">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 13">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 14">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 15">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 16">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 17">

  </radTS:Tab>

  <radTS:Tab runat="server" Text="Root Tab 18">

  </radTS:Tab>

  </Tabs>

  </radTS:RadTabStrip>

  <input id="Button1" type="button" value="button" onclick="SetScrollPosition()" />

  </form>

  </body>

  
  
  Kind regards,
  Paul
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Lakshman Venkat

  Posted on Jan 9, 2008 (permalink)

  Hi Paul,
  
  Thanks for the reply. I tried your code it works fine say if I move to the Root Tab 18 for example but then When I try to get back to Root Tab 1 it is same as before that it shows the page but not selecting the tab.Here is my latest Javascript Code. the tab structure remains the same.
  
  

  <

  script type="text/javascript" language="javascript">

  function NavigateTo(tabIndex)
  

  {

  var tab1 = <%= RadTabStrip1.ClientID %>.Tabs[tabIndex];

  tab1.Select();

  var selectedTab = <%=RadTabStrip1.ClientID %>.SelectedTab;

  selectedTab.TabStrip.Scroll.ScrollBy(-selectedTab.DomElement.offsetLeft);

  }

  </script>
  
  Appreciate your response.

• Paul Paul

  Posted on Jan 11, 2008 (permalink)

  Hi Lakshman,
  
  Please find below a sample code snippet that demonstrates the needed approach.
  
  

  <form id="form1" runat="server">

  <script type="text/javascript">

  function ShowSelectedTab ()

  {

  var selectedTab = <%=RadTabStrip1.ClientID %>.SelectedTab;

  selectedTab.TabStrip.Scroll.ScrollBy(- selectedTab.DomElement.offsetLeft - selectedTab.TabStrip.Scroll.ScrollPosition);

  }

  function SetScrollPosition()

  {

  var myTab = <%= RadTabStrip1.ClientID %>.FindTabByText("Root Tab 14");

  myTab.Select();

  ShowSelectedTab();

  }

  function SetScrollPosition2()

  {

  var myTab = <%= RadTabStrip1.ClientID %>.FindTabByText("Root Tab 8");

  myTab.Select();

  ShowSelectedTab();

  }

  </script>

  <radTS:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="True" Width="500px">

  <Tabs>

  <radTS:Tab ID="Tab1" runat="server" Text="Tab1">

  </radTS:Tab>

  <radTS:Tab ID="Tab2" runat="server" Text="Tab2">

  </radTS:Tab>

  <radTS:Tab ID="Tab3" runat="server" Text="Tab3">

  </radTS:Tab>

  <radTS:Tab ID="Tab4" runat="server" Text="Root Tab 4">

  </radTS:Tab>

  <radTS:Tab ID="Tab5" runat="server" Text="Root Tab 5">

  </radTS:Tab>

  <radTS:Tab ID="Tab6" runat="server" Text="Root Tab 6">

  </radTS:Tab>

  <radTS:Tab ID="Tab7" runat="server" Text="Root Tab 7">

  </radTS:Tab>

  <radTS:Tab ID="Tab8" runat="server" Text="Root Tab 8">

  </radTS:Tab>

  <radTS:Tab ID="Tab9" runat="server" Text="Root Tab 9">

  </radTS:Tab>

  <radTS:Tab ID="Tab10" runat="server" Text="Root Tab 10">

  </radTS:Tab>

  <radTS:Tab ID="Tab11" runat="server" Text="Root Tab 11">

  </radTS:Tab>

  <radTS:Tab ID="Tab12" runat="server" Text="Root Tab 12">

  </radTS:Tab>

  <radTS:Tab ID="Tab13" runat="server" Text="Root Tab 13">

  </radTS:Tab>

  <radTS:Tab ID="Tab14" runat="server" Text="Root Tab 14">

  </radTS:Tab>

  <radTS:Tab ID="Tab15" runat="server" Text="Root Tab 15">

  </radTS:Tab>

  <radTS:Tab ID="Tab16" runat="server" Text="Root Tab 16">

  </radTS:Tab>

  <radTS:Tab ID="Tab17" runat="server" Text="Root Tab 17">

  </radTS:Tab>

  <radTS:Tab ID="Tab18" runat="server" Text="Root Tab 18">

  </radTS:Tab>

  </Tabs>

  </radTS:RadTabStrip>

  <input id="Button1" type="button" value="Show Root Tab 14" onclick="SetScrollPosition()" />

  <input id="Button2" type="button" value="Show Root Tab 8" onclick="SetScrollPosition2()" />

  </form>

  
  
  Greetings,
  Paul
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Lakshman Venkat

  Posted on Jan 14, 2008 (permalink)

  Hi Paul,
  
  Thanks. It works perfectly. Appreciate all the help.
  
  Lak

• valse

  Posted on Jul 9, 2008 (permalink)

  Hi...
  
  ...I follow your example and I add a javascript function to OnClientLoad of my tabstrip (I select a random tab index on the page load)...
  
  ...tab scroll correctly to the tab selected but if the tab was hidden before the scroller arrows stop to working...
  
  This is my function called:
  
  

  function ShowSelectedTab(myTab)

  {

  var selectedTab = myTab.SelectedTab;

  selectedTab.TabStrip.Scroll.ScrollBy(- selectedTab.DomElement.offsetLeft - selectedTab.TabStrip.Scroll.ScrollPosition);

  }

  
  Thanks
  Marco

• Peter

  Posted on Aug 1, 2008 (permalink)

  I'm not getting this done.
  
  If I run the script in the examle, not even the first line of js will execute.
  var myTab = <%= RadTabStrip1.ClientID %>.FindTabByText....
  
  
  if i run this script i will get undefined in alert, while i see a selected tab on the screen. So I cant even start scrolling yet.
  

  function ShowSelectedTab()

  {

  var strip = "<%=RadTabStrip1.ClientID %>";

  var selectedTab = strip.SelectedTab;

  alert(selectedTab);

  }

  
  
  
  
  code:
  (js in radcodeblock)
  

  function ShowSelectedTab()

  {

  var strip = "<%=RadTabStrip1.ClientID %>";

  var selectedTab = strip.SelectedTab;

  alert(selectedTab);

  }

  function SetScrollPosition()

  {

  var myTab = <%= RadTabStrip1.ClientID %>.SelectedTab();

  alert("bleh");  // not working

  var selectedTab = <%=RadTabStrip1.ClientID %>.SelectedTab;

  selectedTab.TabStrip.Scroll.ScrollBy(-selectedTab.DomElement.offsetLeft);

  }

  
  

  <asp:UpdatePanel ID="updpTabstrip" runat="server" UpdateMode="Conditional">

  <ContentTemplate>

  <img src="../Images/Export/icon_html.gif" onclick="SetScrollPosition" />

  <%-- tablist --%>

  <telerik:RadMenu runat="server" ID="rcmTabList" ClickToOpen="true" OnItemClick="rcmTabList_Click">

  <Items>

  <telerik:RadMenuItem ImageUrl="../Images/StatCategories/icon_inhoud.png" ToolTip="Tablijst" ID="rmiTabList" BackColor="Transparent" Height="34px" Width="17" PostBack="false">

  <Items>

  <%-- filled in dynamically --%>

  </Items>

  </telerik:RadMenuItem>

  </Items>

  </telerik:RadMenu>

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

  ontabclick="RadTabStrip1_TabClick" ScrollChildren="True"

  ScrollButtonsPosition="Middle" onclienttabselecting="onTabSelecting">

  </telerik:RadTabStrip>

  </ContentTemplate></asp:UpdatePanel>

  
  greets
  

• Paul Paul

  Posted on Aug 1, 2008 (permalink)

  Hi Peter,
  
  This forum thread and the provided code snippets are related to the classic version of the control - RadTabStrip for ASP.NET "Classic".
  
  For details on how to achieve the same using RadTabStrip for ASP.NET AJAX please take a look at this forum post.
  
  Regards,
  Paul
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Ricardo de Assuncao Goncalves

  Posted on Apr 27, 2011 (permalink)

  Hi all,
  
  
  I did like this and it is working perfect in all browsers:
  
  
  Add this block in the Header tag:
  
  
               <script type="text/javascript">
                  function FixTabs(tabStrip) {
                          tabStrip.get_selectedTab().scrollIntoView();
                      }
              </script>
  
  
  Add set this property in the RadTabStrip:
  
  
  OnClientLoad="FixTabs"
  
  
  Example:
  
  
  <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="540px" Skin="Outlook"
                                                  ScrollButtonsPosition="Right" ScrollChildren="true" OnClientLoad="FixTabs" SelectedIndex="12">
                                                  <Tabs>
                                                      <telerik:RadTab runat="server" Text="01/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="02/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="03/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="04/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="05/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="06/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="07/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="08/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="09/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="10/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="11/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="12/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="13/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="14/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="15/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="16/10/2011">
                                                      </telerik:RadTab>
                                                      <telerik:RadTab runat="server" Text="17/10/2011">
                                                      </telerik:RadTab>
                                                  </Tabs>
  </telerik:RadTabStrip>
  
  
  Regards
  Ricardo Goncalves
  

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Tabstrip > Selcting a Tab not visible on the screen