UltimateTabstrip Client-Side API

Tabstrip Properties and Methods
API Element Description Example
UltimateTabstrips[ultimateTabstripId] UltimateTabstrip object collection.

Each UltimateTabstrip object is stored in this object collection separately and can be reached through UltimateTabstrips associative array.
UltimateTabstrips['UltimateTabstrip1']
UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>']
UltimateTabstrips.UltimateTabstrip1
UltimateTabstrips.<%=UltimateTabstrip1.ClientID%>
Tabs The collection of tabs within the UltimateTabstrip object.

Each tab object can be reached by their array index, which is zero-based.
var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
for (var i = 0, loopCnt = tabstripObj.Tabs.length; i < loopCnt; i++) {
  var tabObj = tabstripObj.Tabs[i];
  tabObj.Activate();
}
GetTabById(tabId) Returns the tab object.

tabId: Required. String that specifies the ID of the tab.
var tabObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'].GetTabById('UltimateTabstrip1t0');
GetTabByHeaderText(headerText) Returns the tab object.

headerText: Required. String that specifies the header text of the tab.
var tabObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'].GetTabByHeaderText('Products');
GetActiveTab() Returns the active tab object. var tabObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'].GetActiveTab();
Tabstrip Events
API Element Description Example
TabstripLoad(sender) Handles the client-side event that fires when the UltimateTabstrip control is completely loaded and ready to be reached by the UltimateTabstrips collection on the client-side.

sender: The UltimateTabstrip object on which the client-side event fired.

TabstripLoad is set by UltimateTabstrip server control OnClientTabstripLoad property.
Server-side (ASPX):
<kswc:UltimateTabstrip id="UltimateTabstrip1" runat="server" OnClientTabstripLoad="TabstripLoad">

Client-side (JavaScript):
function TabstripLoad(sender) {
  var tabstripObj = sender;
  alert(tabstripObj.GetActiveTab());
}
 
Tab Properties and Methods
API Element Description Example
Tab object A tab object can be retrieved in the following ways:

1. Through the Tabs collection of the UltimateTabstrip object.
2. Using GetTabById method of the UltimateTabstrip object by providing the tab id.
3. Using GetTabByHeaderText method of the UltimateTabstrip object by providing the tab header text.
var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj1 = tabstripObj.Tabs[0];
var tabObj2 = tabstripObj.GetTabById('UltimateTabstrip1t0');
var tabObj3 = tabstripObj.GetTabByHeaderText('Products'); }
Activate Activates the tab. var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj = tabstripObj.Tabs[0];
tabObj.Activate();
GetId Gets the ID of the tab. var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj = tabstripObj.Tabs[0];
alert(tabObj.GetId());
GetHeaderText Gets the header text of the tab. var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj = tabstripObj.Tabs[0];
alert(tabObj.GetHeaderText());
GetIndex Gets the zero-based index of the tab within the tab collection. var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj = tabstripObj.GetActiveTab();
alert(tabObj.GetIndex());
SetEnabled(enabled) Sets the enabled property of the tab.

enabled: Required. Boolean that specifies whether the tab is enabled.
var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj = tabstripObj.Tabs[0];
tabObj.SetEnabled(true);
SetVisible(enabled) Sets the visible property of the tab.

visible: Required. Boolean that specifies whether the tab is visible.
var tabstripObj = UltimateTabstrips['<%=UltimateTabstrip1.ClientID%>'];
var tabObj = tabstripObj.Tabs[0];
tabObj.SetVisible(true);
Tab Events
API Element Description Example
TabActivate(sender, e) Handles the client-side event that fires when the when the tab is set as the active tab.

sender: The tab object on which the client-side event fired.
e: The JavaScript event object.

TabActivate is set by UltimateTabstrip server control OnClientTabActivate property.
Server-side (ASPX):
<kswc:UltimateTabstrip id="UltimateTabstrip1" runat="server" OnClientTabActivate="TabActivate">

Client-side (JavaScript):
function TabActivate(sender, e) {
  var tabObj = sender;
  alert(tabObj.GetHeaderText());
}
TabBeforeActivate(sender, e) Handles the client-side event that fires immediately before the tab is set as the active tab. Note that the event can be cancelled by returning false from this method to prevent the tab to be activated.

sender: The tab object on which the client-side event fired.
e: The JavaScript event object.

TabBeforeActivate is set by UltimateTabstrip server control OnClientTabBeforeActivate property.
Server-side (ASPX):
<kswc:UltimateTabstrip id="UltimateTabstrip1" runat="server" OnClientTabBeforeActivate="TabBeforeActivate">

Client-side (JavaScript):
function TabBeforeActivate(sender, e) {
  var tabObj = sender;
  return (confirm('Are you sure you want to activate ' + tabObj.GetHeaderText() + ' tab?'));
}
TabMouseOut(sender, e) Handles the client-side event that fires when the user moves the mouse pointer outside the boundaries of the tab.

sender: The tab object on which the client-side event fired.
e: The JavaScript event object.

TabMouseOut is set by UltimateTabstrip server control OnClientTabMouseOut property.
Server-side (ASPX):
<kswc:UltimateTabstrip id="UltimateTabstrip1" runat="server" OnClientTabMouseOut="TabMouseOut">

Client-side (JavaScript):
function TabMouseOut(sender, e) {
  var tabObj = sender;
  alert(tabObj.GetHeaderText());
}
TabMouseOver(sender, e) Handles the client-side event that fires when the user moves the mouse pointer into the tab.

sender: The tab object on which the client-side event fired.
e: The JavaScript event object.

TabMouseOver is set by UltimateTabstrip server control OnClientTabMouseOver property.
Server-side (ASPX):
<kswc:UltimateTabstrip id="UltimateTabstrip1" runat="server" OnClientTabMouseOver="TabMouseOver">

Client-side (JavaScript):
function TabMouseOver(sender, e) {
  var tabObj = sender;
  alert(tabObj.GetHeaderText());
}