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" "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>
Comments
Anonymous
April 16, 2007
You've been kicked (a good thing) - Trackback from DotNetKicks.comAnonymous
June 04, 2007
The comment has been removedAnonymous
June 04, 2007
Cool!Anonymous
June 10, 2007
That's easy enough but do you know how I could change tabs by clicking on a link button in a row of a gridview control? I've tried changing the tab by using lines such as: tabcontainer.ActiveTab=tab2; & tabcontainer.ActiveTabIndex=1; and neither of these result in the tab changing.Anonymous
June 22, 2007
AJAX Toolkit now has a tab control - as you start using it one of the things you might want to do is...Anonymous
June 25, 2007
I'm getting IE script error saying that Sys. is undefined when loading in the page and none of the tabs come up when I select from dropdown list. I'm using VS2005. How do I fix this error? ThanksAnonymous
July 03, 2007
In case you don't wanna mix "server" code within your javascript, instead of doing: var tabBehavior = $get('<%=MyTabs.ClientID%>').control; you can do: var tabBehavior = $find('MyTabs'); Regards, PS: you can follow the same approach to get the drop down list control.Anonymous
July 03, 2007
Hi Santiago, The Reason I put in the Expression to evaluate the ClientID is , as anyone who develops with asp.net 2.0 knows , the ClientIDs of the Controls get changed if a MasterPage comes into the Picture . Or for that matter , any naming container that changes the Client-Side ID of the Control. $find('MyTabs') would work in case I specified the BehaviorID of the TabControl in its markup. At the Time of writing of this Post , the behavior had to be accessed in the way I have shown above. Thanks, RajAnonymous
September 24, 2007
My tabcontainer is in a DataList. Using the following, I get a build error becuase it can't find TabContainer. $get('<%=TabContainer1.ClientID%>') So I have to do this: $get('ctl00_ContentPlaceHolder1_PropertyView_ctl00_TabContainer1') This is naf, how can I find the ClientID so I don't have to specify it in full?Anonymous
November 14, 2007
I have a tab container and some tab panels, the container is in an UpdatePanel. In one of the tabs I have a button which when clicked does some server side work and makes another control visible The problem was, once the button was clicked the tab lost its focus and the first tab appeared. I tried using TabContainer1.ActiveTab, and also TabContainer1.ActiveTabIndex, with the tab's TabIndex and it didnt work. so i did it using scriptmanager UI_Utils.AjaxDoScript(this, "var tabIdx=$find('" + tabModifyQuestion.ClientID + "').tabIndex;" + "$find('" + TabContainer1.ClientID + "').set_activeTabIndex(tabIdx);", 200); public static void AjaxDoScript(Control c, string body, int timeout) { Random rnd = new Random(); string functionName = "ajaxDo" + rnd.Next(100, 999); StringBuilder sb = new StringBuilder("function "); sb.Append(functionName); sb.Append("(){window.clearTimeout("); sb.Append(functionName); sb.AppendFormat(");{0}", body); sb.Append("}window.setTimeout"); sb.AppendFormat("({0},{1});", functionName, timeout); ScriptManager.RegisterClientScriptBlock(c, c.GetType(), "tmp" + functionName, sb.ToString(), true); } this workedAnonymous
November 25, 2007
In un sito web a cui sto lavorando ho inserito in una pagina il controllo Tabs dell'AJAX ControlAnonymous
March 12, 2009
Thanx for the article. I was a long time trying to figure out why set_activeTabIndex wasn't working for me. Your point to the ".control" element of the tab container saved me a lot of time.Anonymous
April 24, 2009
Also wanted to share an example for setting active Index when you have validators in different tabs. You can create javascript method such as: function RunValidationsAndSetActiveTab() { if (typeof (Page_Validators) == "undefined") return; try { var noOfValidators = Page_Validators.length; for (var validatorIndex = 0; validatorIndex < noOfValidators; validatorIndex++) { var validator = Page_Validators[validatorIndex]; ValidatorValidate(validator); if (!validator.isvalid) { var tabPanel = validator.parentElement.control; var tabContainer = tabPanel.get_owner(); tabContainer.set_activeTabIndex(tabPanel.get_tabIndex()); break; } } } catch (Error) { alert("Failed"); } } In the button that is used to submit all the tabs at once where each tab has set of validations you can call the above method on click of button on client side such as: <asp:Button ID="btnSaveResponse" Text="Submit Response" runat="server" OnClick="btnSaveResponse_Click" OnClientClick="RunValidationsAndSetActiveTab();" />Anonymous
October 27, 2009
The .control was what I was missing - thank you so much!Anonymous
January 11, 2010
hi, thanks a lot for this cool tip how did you find out that it was the control property?Anonymous
May 13, 2011
Thaks it help me to much. Regards.