HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl

  • Article

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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>