I am trying to change the selected tab from a hyperlink within a TabPanel to activate another tab (TabPanel). Ideally, I would like to do this on the client side using javascript. Can this be done and if so how?
I am using the official release version of the Ajax Control Tookit.
Thanks in advance for any help or suggestions!
Brian
Hi,
you can use this javascript method and call the method from a hyperlink control:
function SetActiveTab(tabControl, tabNumber)
{
var ctrl = $find(tabControl);
ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
}
I have an example for you:
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Evaluator.aspx.cs" Inherits="Evaluator" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!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 id="Head1" runat="server"> <title>Tab Control </title> <script> function SetActiveTab(tabControl, tabNumber) { var ctrl = $find(tabControl); ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <input type="Button" id="tabChange" value="Set Tab" onclick="SetActiveTab('<%=Tabs.ClientID%>', 1)" /> <br /> <cc1:TabContainer ID="Tabs" runat="server"> <cc1:TabPanel runat="server" ID="tab1" HeaderText="Tab 1"> <ContentTemplate> Test Tab 1 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" ID="tab2" HeaderText="Tab 2"> <ContentTemplate> Test Panel 2 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" ID="tab3" HeaderText="Tab 3"> <ContentTemplate> Test Panel 3 </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </form> </body></html> RegardsMarc Andre
Thank you very much! That works perfectly.
regards,
Brian
What about server side changing?
Anyone?
also interested in server-side - thanks.
right infront of me - "tabs.ActiveTabIndex = 0" where tabs is the tabcontainerid and 0 = tabid.
I am trying to programatically change the Active Tab to Tab B, after doing a partial page postback using an UpdatePanel in Tab A. It doesn't work. If I do a full page postback it does work. Can you switch tabs programatically after a partial page postback?
srr0943:
I am trying to programatically change the Active Tab to Tab B, after doing a partial page postback using an UpdatePanel in Tab A. It doesn't work. If I do a full page postback it does work. Can you switch tabs programatically after a partial page postback?
I'm having the same issue right now. I haven't tried performing a "full postback" yet, but I can't seem to get the tabs to change.
This is what I've done to resolve this issue.
I have a TabContainer that has about 4-5 tabs depending on the tabs required by the user. Each tab has an update panel within it to prevent full postbacks. What I did was housed the entire TabContainer in a "parent" UpdatePanel. Once I have set it to change the active tab via TabContainer.ActiveTabIndex = 0,1,2 etc I tell the parent UpdatePanel to update. See code example below
TabContainer.ActivetabIndex = 1
ParentUpdatePanel.Update()
Voila!
Hi!
I've same but little different problem. When user clicks on a non_active tab, I want to keep active tab as active if some criteria doesn't meet. For example, I've 2 tabs in tab container. Suppose Tag[0] is active tab right now. When user clicks on Tag[1], I call a javascript method, that I've set in the OnClientClick property of Tag[1]. The JavaScript method is as under
function checkCriteria()
{
var stopTabChange = true;
if (stopTabChange)
{
var ctrl = $find('<%=myTabs.ClientID%>');
ctrl.set_activeTab(ctrl.get_tabs()[0]);
}
}
The above method is called when user clicks on Tag[1]. I assume that due to above method, Tag[1] will not become active and Tag[0] will remain active. But instead of above method, Tag[1] still becomes active. Can you help me that please?
Regards
Amer Javaid
Hi!
Thanks everybody, I figured it out how to do that. I called above method in OnClientActiveTabChanged event of TabContainer and it worked.
Regards
Amer Javaid
I'm sorry for not understanding this but I am very new to AJAX controls and need a little help with VB.Net code behind to do this:
"right infront of me - "tabs.ActiveTabIndex = 0" where tabs is the tabcontainerid and 0 = tabid."
can anyone please point me to an example in VB.Net?
I have 3 tabs in my TabContainer and on certain criteria need to change the visible Tabpanel using the code-behind. Any help would be greatly appreciated. TIA,
Coleen,
Let's say on a button click you want to change the active tab panel. In that case, under the buttons onClick event you would write some code that would look like below:
TabContainerName.ActiveTabIndex = 0 ' or any number from 0, 1, 2 - because in your example you only have three tabs.
Does that make sense?
Yes, thank you very much!
Actually I tried to setActiveTabIndex in event handler on Click edit commend in GridView as aserver sidesolution and is not working, at least in my case.
