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#  Copy Code
  TabPage tab = new TabPage(); tab.ID = "ServerTab" + TabControl1.Tabs.Count.ToString(); tab.Title = tab.ID; TabControl1.Tabs.Add(tab); TabControl1.DataBind();

  
  

  VB.NET  Copy Code
  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#  Copy Code
  TabControl1.Tabs.Remove(TabControl1.Tabs[TabControl1.Tabs.Count - 1]); TabControl1.DataBind();

  
  

  VB.NET  Copy Code
  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  Copy Code
  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  Copy Code
  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  Copy Code
  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  Copy Code
  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.