Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Tabstrip > Scroll to particular tab

• Jacky Chau Intermediate

  Posted on Sep 4, 2007 (permalink)

  Is it possible to scroll to a particular tab in code?  For example, I have 15 tabs on the page and depending on a saved setting, I need to show the content of a tab.  It works fine except if the tab is not currently visible, then the user can't see the tab the content is for.  What would be great if there's a ScrollToTab(anID as string) function on server or client side and the selected tab will be centered or left aligned.

• Paul Paul

  Posted on Sep 5, 2007 (permalink)

  Hello Jacky,
  
  Please find below a sample code snippet that demonstrates the needed approach.
  
  ASPX:
  

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

  <radTS:RadTabStrip ID="RadTabStrip1" runat="server" ScrollButtonsPosition="Middle" ScrollChildren="True" Width="200px" AutoPostBack="True">

  <Tabs>

  <radTS:Tab Text="Tab 1" runat="server">

  </radTS:Tab>

  <radTS:Tab Text="Tab 2" runat="server">

  </radTS:Tab>

  <radTS:Tab Text="Tab 3" runat="server">

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

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

  </radTS:Tab>

  </Tabs>

  </radTS:RadTabStrip>

  <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

  <script type="text/javascript">

  function SetScrollPosition()

  {

  setTimeout(

  function()

  {

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

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

  },

  0);

  }

  window.onload = SetScrollPosition;

  </script>

  </form>

  
  Code-behind:
  

  protected void Button1_Click(object sender, EventArgs e)

  {

  RadTabStrip1.SelectedIndex = 5;

  }

  
  
  Greetings,
  Paul
  the Telerik team

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

• Jacky Chau Intermediate

  Posted on Sep 5, 2007 (permalink)

  Thanks.  Worked awesome.  One final question.  Is it possible to determine on clientside if the selectedtab is offscreen?  I dont want to change the scroll position unless the selectedtab is not visible. 

• Mike

  Posted on Jul 3, 2008 (permalink)

  The following code scrolls the TabStrip to put the selected tab in the middle of the strip iff the tab is not completely visible.
  
  

  <script type="text/javascript">

  function FixTabs(tabStrip)

  {

  function SetScrollPosition()

  {

  var selectedTab = tabStrip.SelectedTab;

  var tabWidth = selectedTab.DomElement.offsetWidth;

  var tabRight = selectedTab.DomElement.offsetLeft + tabWidth;

  var stripWidth = tabStrip.DomElement.offsetWidth;

  if ( tabRight > stripWidth ) {

  tabStrip.Scroll.ScrollBy(stripWidth - tabRight - stripWidth/2 - tabWidth/2);

  }

  }

  setTimeout(SetScrollPosition, 0);

  }

  </script>

  
  Add OnClientLoad="FixTabs" to your RadTabStrip definition to call the function when the tab strip loads.

• Paul

  Posted on Jul 31, 2008 (permalink)

  tabStrip.Scroll.ScrollBy doesn't seem to be supported with the current version. Is there any other examples of how to accomplish the same thing with the newer client API?

• Peter

  Posted on Aug 1, 2008 (permalink)

  Hey guys,
  
  I'm not getting this done in my web app.
  I have added a RadMenu to create a list of tabs in front of the tabstrip (like in the tabs of internet explorer, you can click and view all tabs)
  I have tried to add your code, but this is not working for me.
  
  the script is starting up so if i place an alert in the script, i'll get the alert.
  
  Any suggestions?
  
  

  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

  <script type="text/javascript">

  function onTabSelecting(sender, args)

  {

  //var tab = args.get_tab().get_index();

  var tab = args.get_tab().get_value();

  tab--;

  for (var x=0; x<10; x++)

  {

  var pnl = document.getElementById("pnl" + (x+1));

  if (x == tab)

  {

  pnl.style.visibility = "visible";

  pnl.style.display = "inline";

  }

  else

  {

  pnl.style.visibility = "hidden";

  pnl.style.display = "none";

  }

  }

  }

  function onTabListItemSelecting(e)

  {

  for(var x=1; x<=10; x++)

  {

  var pnl = document.getElementById("pnl" + (x));

  if (x == e)

  {

  pnl.style.visibility = "visible";

  pnl.style.display = "inline";

  }

  else

  {

  pnl.style.visibility = "hidden";

  pnl.style.display = "none";

  }

  }

  }

  function FixTabs(tabStrip)

  {

  function SetScrollPosition()

  {

  var selectedTab = tabStrip.SelectedTab;

  var tabWidth = selectedTab.DomElement.offsetWidth;

  var tabRight = selectedTab.DomElement.offsetLeft + tabWidth;

  var stripWidth = tabStrip.DomElement.offsetWidth;

  if ( tabRight > stripWidth ) {

  tabStrip.Scroll.ScrollBy(stripWidth - tabRight - stripWidth/2 - tabWidth/2);

  }

  }

  setTimeout(SetScrollPosition, 0);

  }

  </script>

  </telerik:RadCodeBlock>

  
  
  

  1	<asp:UpdatePanel ID="updpTabstrip" runat="server" UpdateMode="Conditional">
  2	<ContentTemplate>
  3
  4	<%-- tablist --%>
  5	<telerik:RadMenu runat="server" ID="rcmTabList" ClickToOpen="true" OnItemClick="rcmTabList_Click">
  6	<Items>
  7	<telerik:RadMenuItem ImageUrl="../Images/StatCategories/icon_inhoud.png" ToolTip="Tablijst" ID="rmiTabList" BackColor="Transparent" Height="34px" Width="17" PostBack="false">
  8	<Items>
  9	<%-- filled in dynamically --%>
  10	</Items>
  11	</telerik:RadMenuItem>
  12	</Items>
  13	</telerik:RadMenu>
  14	<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
  15	ontabclick="RadTabStrip1_TabClick" ScrollChildren="True"
  16	ScrollButtonsPosition="Middle" onclienttabselecting="onTabSelecting" OnClientLoad="FixTabs">
  17	</telerik:RadTabStrip>
  18	</ContentTemplate></asp:UpdatePanel>

  
  
  

  protected void rcmTabList_Click(object sender, RadMenuEventArgs e)

  {

  RadTabStrip1.SelectedIndex = Convert.ToInt32(e.Item.Value) - 1;

  string pageViewID = RadTabStrip1.SelectedTab.Value;

  string scriptstr = "onTabListItemSelecting(" + pageViewID + ");";

  ScriptManager.RegisterStartupScript(Page, this.GetType(), "script", scriptstr, true);

  // fire event

  if (TabClick != null)

  {

  TabClick(sender, new Telerik.Web.UI.RadTabStripEventArgs(RadTabStrip1.SelectedTab));

  }

  }

  
  Greets, Peter
  

• Paul Paul

  Posted on Aug 1, 2008 (permalink)

  Hi there,
  
  This forum thread and the provided code snippet 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 > Scroll to particular tab