Tuesday, 5 August 2014

HowTo Change Visible Tab Using JavaScript in the AJAX TabControl

Here I am explain "How do I change the Visible Tab in the AJAX TabControl on the Client-Side using Javascript ?"
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">
//Your Code
</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>

No comments:

Post a Comment