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>
You’ve been kicked (a good thing) – Trackback from DotNetKicks.com
Great article, very usable and extendable. Thank you!
(bs.)
Cool!
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.
AJAX Toolkit now has a tab control – as you start using it one of the things you might want to do is…
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?
Thanks
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.
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,
Raj
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?
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 worked
In un sito web a cui sto lavorando ho inserito in una pagina il controllo Tabs dell'AJAX Control
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.
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();” />
The .control was what I was missing – thank you so much!
hi,
thanks a lot for this cool tip
how did you find out that it was the control property?
Thaks it help me to much.
Regards.