RadTabStrip for ASP.NET
Contents
Scrollable tabstrip Send comments on this topic.
See Also
Feature overview > Scrollable tabstrip

Glossary Item Box

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

The scroll buttons can be positioned to the left, to the right, or to both sides (one to the left and one to the right) of the tabstrip. Button positioning is controlled from 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.

Any of these properties can also be set per tab, in which case they affect only the child nodes of tabs. Note that none of these properties' values are inherited down the tab hierarchy.

To change the appearance of the scroll buttons, edit the following style selectors inside the styles.css class in the skin you are using (located at ~/RadControls/TabStrip/Skins/{SkinName}):

  • leftArrow
  • rightArrow
  • leftArrowDisabled
  • rightArrowDisabled

Examples

All examples below show a scrollable tabstrip. The strip contains five tabs but only the first three are visible. The scroll is set to advance per tab. The examples show different settings of the ScrollButtonsPosition property.

 

  • The first example shows the scroll buttons on the right of the strip. This is the default value: the ScrollButtonsPosition property is not set.

A scrollable tabstrip

ASPX Copy Code
<rad:RadTabStrip id="RadTabStrip1" runat="server" Skin="WinXP" ScrollChildren="True" PerTabScrolling="True">
   <Tabs>
       <rad:Tab TabStrip="RadTabStrip1" Text="Advanced"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="AutoUpdates"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="Remote Assistance"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="Hardware"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="System Restore"></rad:Tab>
   </Tabs>
</rad:RadTabStrip>
  • The second example shows the scroll buttons on the left. 

A scrollable tabstrip

ASPX Copy Code
<rad:RadTabStrip id="RadTabStrip1" Skin="WinXP"
  ScrollChildren="True" PerTabScrolling="True" ScrollButtonsPosition="Left">
   <Tabs>
       <rad:Tab TabStrip="RadTabStrip1" Text="Advanced"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="AutoUpdates"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="Remote Assistance"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="Hardware"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="System Restore"></rad:Tab>
   </Tabs>
</rad:RadTabStrip>
  • The third example shows a scrollable tabstrip with the ScrollButtonsPosition property set to Middle.

A scrollable tabstrip

ASPX Copy Code
<rad:RadTabStrip id="RadTabStrip1" Skin="WinXP" ScrollChildren= "True" PerTabScrolling="True" ScrollButtonsPosition="Middle">
   <Tabs>
       <rad:Tab TabStrip="RadTabStrip1" Text="Advanced"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="AutoUpdates"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="Remote Assistance"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="Hardware"></rad:Tab>
       <rad:Tab TabStrip="RadTabStrip1" Text="System Restore"></rad:Tab>
   </Tabs>
</rad:RadTabStrip>
See a live example of this functionality at www.telerik.com.
 

See Also