Monday, April 16, 2007 11:20 PM
PhaniRajuYN
HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl
I have seen this in the forums a lot ..
"How do I change the Visible Tab in the MS AJAX TabControl on the Client-Side using Javascript ?"
Well, I have posted it several times and I think Its time I'd rather point people to a link than write the same piece again and again :-).
So, here you go .....
1) Consider that you have a TabControl on your page by the name of "MyTabs" .
<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
//blah blah blah
</ajaxToolKit:TabContainer>
2) You can access the Methods exposed by the TabControl by accessing its behavior.
The Behavior is not accessible easily .
The TabControl has a property called as "control" that provides a way to access the Client-Side Methods of the
TabControl.
EX: var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 3) once you have a handle to the Tabbehavior , you can use the "set_activeTab" method to set the Active Tab of the TabControl.
EX:tabBehavior.set_activeTabIndex(1);
4) You are Done !!
Complete Code for the ChangeTab Function :
<script language="javascript">
function changeTab( tabIndex ){
var tabBehavior = $get('<%=MyTabs.ClientID%>').control;
tabBehavior.set_activeTabIndex(tabIndex);
}</script>
The Complete Example is posted below :
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Select Tabs By Script</title>
</head>
<body>
<form id="frmAccessAccordion" runat="server">
<script language="javascript">
function changeTab(){
//Get The Index of the Current Selected Index in the DropDownList
var tabIndex = parseInt( $get('<%=dlTabindex.ClientID%>').value );
//Get a Handle to the Tab Behavior
var tabBehavior = $get('<%=MyTabs.ClientID%>').control;
//Set the Currently Visible Tab
tabBehavior.set_activeTabIndex(tabIndex);
}
</script>
Select Tab To Show :
<asp:DropDownList runat="server" ID="dlTabindex">
<asp:ListItem Text="One" Value="0"></asp:ListItem>
<asp:ListItem Text="Two" Value="1"></asp:ListItem>
<asp:ListItem Text="Three" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnDynamicAnimate" runat="server" Text="Button" OnClientClick="changeTab();return false;" />
<asp:ScriptManager runat="server" ID="scrpManager" EnablePartialRendering="true">
</asp:ScriptManager>
<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
<ajaxToolKit:TabPanel runat="server" ID="tabOne">
<HeaderTemplate>
One
</HeaderTemplate>
<ContentTemplate>
Tab One
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabTwo">
<HeaderTemplate>
Two
</HeaderTemplate>
<ContentTemplate>
Tab Two
<asp:Button runat="server" ID="btnServer" Text="Submit" />
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabThree">
<HeaderTemplate>
Three
</HeaderTemplate>
<ContentTemplate>
Tab Three
<asp:Button runat="server" ID="Button1" Text="Submit" />
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
</form>
</body>
</html>