$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Tab Scrolling Feature in ASP.NET AJAX
Home > How to > TabControl Scrolling

In the previous user guide we have introduced to you the tab reordering feature for Kettic Tab Control. In this guiding page, we will mainly focus on the tab scrolling feature, which is also presented in a Visual C# or Visual Basic .NET ASP.NET AJAX web application.
Currently this tab control is compatible with .NET 4.0 and above, and Microsoft Visual Studio 2010 or later. To get it started, you can now download the free trial and read on to take out an evaluation!
In the following section, we will explain with three sections to show you how to apply the tab scrolling feature, position the scrolling buttons and then control the scrolling features respectively. You can follow along with the guiding steps below, and you can also find corresponding sample codes from related demo page.

How to Set Tab Scrolling

By default, if you have too many tabs presented at one level to display them all, this Tab Control will automatically cut / truncate the later part of the tabs so users cannot view them all. More often than not, this is not a desired solution.
In this case, web developers can enable the tab scrolling features, so that when there are too many tabs to be displayed once and for all, you can easily scroll to view them all. Alternatively, you can opt to display these tabs with multiple rows, but we will not be discussing this method in this page.
  • You can apply scrolling for your child tab by setting true to ScrollChildren property for your tab control.
  • You can apply scrolling for your root tab by setting true to ScrollRoot property for your tab control.

How to Position Scroll Button

Once you have set the scrolling to your tab control, you might want to consider how to place the corresponding scroll button for your tab. Similar to scrolling configuration, you can also opt to ad scrolling buttons to child tab level or the root tab.
  • You can add scrolling buttons for your child tab by setting true to ScrollButtonChildren property for your tab control.
  • You can add scrolling buttons for your root tab by setting true to ScrollButtonRoot property for your tab control.
Besides deciding the tab level for the scrolling button, web developers can also decide how to place a scrolling button within a tab level, such as left, right or middle.
  • You can set "Left" for the ButtonPosition so that the buttons is placed at the beginning of the tab set.
  • You can set "Right" for the ButtonPosition so that the buttons is placed at the end of the tab set.
  • You can set "Middle" for the ButtonPosition so that the scrolling left button is placed at the beginning of the tab set, while the scrolling right button is placed at the end of it.

How to Control Scroll Button Behavior

Apart from the methods above to apply and customize scroll button location, web developers can also define the scrolling behavior of the tab scrolling. Currently we provide two options for you to select from.
  • You can set true to TabScrolling so that the scrolling takes place tab by tab, and the first tab appears as a whole.
  • You can set false to TabScrolling so that the scrolling takes place continuously, and the first tab might appear as half of it.
ASP.NET AJAX UI Controls