TabControl

The TabControl represents a container of items, whose contents are displayed in the same area. The TabPage control derives from WindowBase and represents a window with header and content. The content of only one of the tabs in the TabControl is displayed at a time.

Server side

Accessing tabs

Use the Tabs property to get a reference to the control's collection of TabPages.

Changing the current tab

Set the SelectedIndex property to display the corresponding tab.

Changing the default behavior

The TabControl exposes a set of properties, allowing customization of its default appearance and behavior. The TabStripPlacement property specifies the position of the tab headers. The Multiline property allows the tab headers to be displayed in more than one row or column. Use the TabStripScroll property to enable scrolling of the tab header. Users can also be allowed to reorder the tab headers by setting the EnableReorder property to true.

Adding tabs

Use TabControl.Tabs.Add method to add a new tab to the collection.

C#

TabPage tab = new TabPage();
tab.ID = "ServerTab" + TabControl1.Tabs.Count.ToString();
tab.Title = tab.ID;
TabControl1.Tabs.Add(tab);
TabControl1.DataBind();

VB.NET

Dim tab As New TabPage()
tab.ID = "ServerTab" & TabControl1.Tabs.Count.ToString()
tab.Title = tab.ID
TabControl1.Tabs.Add(tab)
TabControl1.DataBind()

Removing items

Use TabControl.Tabs.Remove or TabControl.Tabs.RemoveAt to remove a specified tab from the collection.

C#

TabControl1.Tabs.Remove(TabControl1.Tabs[TabControl1.Tabs.Count - 1]);
TabControl1.DataBind();

VB.NET

TabControl1.Tabs.Remove(TabControl1.Tabs(TabControl1.Tabs.Count - 1))
TabControl1.DataBind()

Events

The following events are exposed by the TabControl.

Event	Event arguments	Description
SelectedIndexChanged	System.EventArgs	Raised when the value of the SelectedIndex property has changed.
Selected	TabControlEventArgs	Raised when a tab is selected.
Deselected	TabControlEventArgs	Raised when a tab is deselected.
TabPageCreated	TabPageEventArgs	Raised when a tab page is created.
TabPageDeleted	TabPageEventArgs	Raised when a tab page is deleted.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var tabControl = $find("TabControl1");
var tabControl = $find("<%= TabControl1.ClientID %>");

Accessing tabs

Use the getAllTabs method to get a reference to the control's tabs array. Use the getActiveTab method to access the currently displayed tab.

Changing the current tab

Use selectTab or selectTabByIndex methods to select the specified tab.

JavaScript

tabControl.selectTab(tabControl.getAllTabs()[2]);
tabControl.selectTabByIndex(2);

Adding tabs

Use the TabControl.createTab method to add a new tab to its tabs array. The createTab method accepts as parameter a JSON object, containing the data for the new tab. Use the data object to define values for the properties and events, exposed by the TabPage class. 

JavaScript

tabControl.createTab({ 
    properties: { navigateUrl: "http://www.mindfusion.eu" }, 
    events: { frameLoaded: onTabPageFrameLoaded} 
});

Removing tabs

Use the TabControl.deleteTab method to remove a specified tab from the array.

JavaScript

tabControl.deleteTab(tabControl.getAllTabs()[0]);

Events

The following client-side events are exposed by the TabControl class.

Event	Event arguments	Script property	Description
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.
tabChanging	TabChangingEventArgs	ActiveTabChangingScript	Raised when the active tab in a tab control is about to be changed.
tabChanged	TabChangedEventArgs	ActiveTabChangedScript	Raised when the active tab in a tab control has changed.

The following client-side events are exposed by the TabPage class.

Event	Event arguments	Script property	Description
headerClick	TabEventArgs	HeaderClickScript	Raised when the user clicks the header of the control.
frameLoaded	-	FrameLoadedScript	Raised when the internal iframe has finished loading.
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.