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