New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Scrolling and Multi-row Tabs

TabStrip in LTR mode

  • Advanced
  • Automatic Updates
  • Remote
  • General
  • Computer Name
  • Hardware
  • System Restore

TabStrip in RTL mode

  • Advanced
  • Automatic Updates
  • Remote
  • General
  • Computer Name
  • Hardware
  • System Restore

TabStrip in two rows using the IsBreak property

  • Advanced
  • Automatic Updates
  • Remote
  • General
  • Computer Name
  • Hardware

  • Demo Configurator
Scroll buttons position
Multi-Row tabs reordering

Scrolling

In case you have too many tabs, you can easily make the tabstrip scrollable by setting the ScrollChildren  property to "True".

The scroll buttons can be positioned to the left, right, or sideways (one to the left and one to the right) of the tabstrip. Button positioning is controlled by the ScrollButtonsPosition property.

When scrolling, the tabstrip can be set to advance smoothly or per tab (where the tabstrip advances with one complete tab to the left or to the right at a time). This behavior is controlled by the PerTabScrolling property.

When used on touch-enabled device, the tabs could be scolled via "swipe" gesture.

Multi-Rows Tabs

Another alternative to reduce the size is to arrange the tabs in two (or more) rows, by setting the IsBreak property on a specific tab which will force the rest of the tabs to be shown on the next row.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.Functionality.ScrollingAndMultiRowTabs.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ScrollButtonsOptionsList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip2" />
                    <telerik:AjaxUpdatedControl ControlID="ScrollButtonsOptionsList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="PerTabScrollingCheckBox">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ReorderTabsOnSelectCheckBox">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip3" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-narrow">
        <h2>TabStrip in LTR mode</h2>
        <p>
            <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server"  Width="500px" ScrollChildren="true"
                SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab Text="Advanced">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Automatic Updates">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Remote">
                    </telerik:RadTab>
                    <telerik:RadTab Text="General">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Computer Name">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Hardware">
                    </telerik:RadTab>
                    <telerik:RadTab Text="System Restore">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </p>
    </div>
    <div class="demo-container size-narrow">
        <h2>TabStrip in RTL mode</h2>
        <p>
            <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip2" runat="server"   Width="500px" ScrollChildren="true"
                dir="rtl" SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab Text="Advanced">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Automatic Updates">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Remote">
                    </telerik:RadTab>
                    <telerik:RadTab Text="General">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Computer Name">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Hardware">
                    </telerik:RadTab>
                    <telerik:RadTab Text="System Restore">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </p>
    </div>
    <div class="demo-container size-narrow">
        <h2>TabStrip in two rows using the IsBreak property</h2>
        <p>
            <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip3" runat="server"  SelectedIndex="0" Align="Justify" Width="500px">
                <Tabs>
                    <telerik:RadTab Text="Advanced">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Automatic Updates">
                    </telerik:RadTab>
                    <telerik:RadTab IsBreak="True" Text="Remote">
                    </telerik:RadTab>
                    <telerik:RadTab Text="General">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Computer Name">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Hardware">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </p>
    </div>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Scroll buttons position" Size="Wide">
                    <asp:RadioButtonList ID="ScrollButtonsOptionsList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ScrollButtonsOptionsList_SelectedIndexChanged"
                        Style="margin-bottom: 10px;">
                        <asp:ListItem Value="Left">Left</asp:ListItem>
                        <asp:ListItem Value="Middle">Middle</asp:ListItem>
                        <asp:ListItem Value="Right" Selected="True">Right</asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:CheckBox Text="Enable per tab scrolling" Checked="false" AutoPostBack="true"
                        runat="server" ID="PerTabScrollingCheckBox" OnCheckedChanged="PerTabScrollingCheckBox_CheckedChanged"></asp:CheckBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Multi-Row tabs reordering" Size="Wide">
                    <asp:CheckBox runat="server" ID="ReorderTabsOnSelectCheckBox" Text="Reorder tabs on select" AutoPostBack="true"
                        OnCheckedChanged="ReorderTabsOnSelectCheckBox_CheckedChanged"></asp:CheckBox>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance