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

Have you ever considered changing the order of your tab arrangement? If so, you can get an answer from this guiding page. In this page, we will provide with a step by step guide so you can easily rearrange the order for your tab control with simple tab drag and drop.
This tab reordering functionality is one of the special features provided by Kettic tab control, which is a very important composing part of the Kettic ASP.NET AJAX UI (User Interface) library SDK. It can be easily integrated into a Visual C# or Visual Basic .NET web application for tab customization.
Please note that besides this tab reordering feature, web developers can also discover other interesting features provided by Kettic tab control, such as tab scrolling and data binding, and so on. We have listed their links here for your reference.

How to Drag Tab to Reorder

The reordering feature is one of the basic functions provided by Kettic tab control, through which you can easily change the existing order by dragging a certain tab or several tabs. But before you get to this, there are two things you should know first.
One thing you should bear in mind, is that users can only drag and reorder a certain tab within its child list level which they are currently in, and you cannot not drag it to an upper level, such as its parent tab. Another important thing you should remember is that when you drag to reorder a root tab, or a child tab with its own child tabs, all the children tabs will tag along with it.
So how do you order a tab control with simple drag and drop? Follow the steps below and you will see.
  1. To begin with, you need to integrate a tab control into your ASP.NET web application first.
  2. Then you can create any number of tabs as you wish.
  3. After that you can customize the tab properties such as Text, Value, Tooltip, etc.
  4. Or you can populate your tabs by data binding to data sources such as Array, DataTable, etc.
  5. Finally you can drag any item in your tab and drop to a target location.
  6. Please note that the drag-to-reorder feature can be applied both vertical and horizontal tab.

Tab Dragging & Reordering Events

In the above sections, we have illustrated how you can easily rearrange the tab control order with easy drag and drop. In this section, we will introduce to you several sever side and client side events related to this reordering feature.
There is only one server side event related for this dragging & reordering feature, and that is the Reordered event. Note that this event only occurs whenever the tabs within your tab control are reordered.
Apart from that, there are three client side events related to the reordering feature, the DragStart event, Reordering event and the Reordered event. The DragStart event is fired right before the drag-to-reorder takes place. The Reordering event is fired between the start and completion of the reordering. That is to say, this event is fired after the dragging takes place and before it is completed. The last one - Reordered event, is only fired after the reodering is finished.