TabContainer and ActiveTabChanged

Hi,

i have a problem with TabContainer.

The ActiveTabChanged server-side event doesn't fire when i click on tab.

Is this a bug?

Can anyone help me?

Thanks everbody!

I believe the server-side event will only fire when a postback occurs. Tabs doesn't use postbacks when simply switching between tabs. Maybe you'd like to use OnClientActiveTabChanged instead?

I ask this because I have this problem: I must load many data from database for each tab of tabcontainer.

So, I don't want to load all data from database only one time, but only if a user clicks on a tab.

I think there is no solution with this event (ActiveTabChanged).

Can you have some ideas to solve my problem with TabContainer?

Maybe with Webservice and pagemethods?
Can you please elaborate a bit on webservice and pagemethod. I have the same problem and need to finda solution asap.
Can you please elaborate a bit on webservice and pagemethod. I have the same problem and need to find a solution asap.

Here is what start working for me (sure it is a temp solution but still...) Sorry for detailed instructions, but I believe in "documenting" everything to make a life easy.

1. Change javascript function to add a custom postback:

 function ActiveTabChanged(sender, e) { var CurrentTab = $get('<%=CurrentTab.ClientID%>'); CurrentTab.innerHTML = sender.get_activeTab().get_headerText(); //add a custom postback __doPostBack('Tabs', sender.get_activeTab().get_headerText()); Highlight(CurrentTab); }

2. In TabContainer add a method:

 <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="450px" OnClientActiveTabChanged="ActiveTabChanged"OnActiveTabChanged="ActiveTabChangedServer" >

3. Inside of TabPanels add an UpdatePanel wrapper and dont forget about trigger!

 <asp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional"> <ContentTemplate> Datagrid, dynamic content etc </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="Tabs" EventName="ActiveTabChanged" /> </Triggers> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgressTabs" AssociatedUpdatePanelID="upTab_List" runat="server"> <ProgressTemplate> Refreshing Tabs...<img alt="" src="Images/loader.gif" /> </ProgressTemplate> </asp:UpdateProgress>

4. Register script in :

Protected Sub Page_Load ........ ScriptManager1.RegisterAsyncPostBackControl(Tabs)

5. Finally add the method you want:

 Public Sub ActiveTabChangedServer(ByVal sender As Object, ByVal e As System.EventArgs) lblTotalCount.Text = "Captured!!!!" End Sub

Outstanding! How about the use of a master page?

<script type="text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('TabsPublications', sender.get_activeTab().get_headerText()); }</script>

Then inside my content panel I have:

ajaxToolkit:TabContainer runat="server" ID="TabsPublications"OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="All Publications"ContentTemplateasp:UpdatePanel ID="UpdatePanel1" runat="server"ContentTemplateasp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional"ContentTemplateasp:GridView runat="server" ID="PubsGridView" AutoGenerateColumns="False" ShowHeader="False" CellSpacing="5" GridLines="None"Columnsasp:TemplateField ItemTemplateasp:HyperLink ID="HyperLink1" NavigateUrl='%# Bind("articleUrl") %' runat="server"asp:Label ID="Label1" runat="server" Text='%# Bind("articleName") %'/asp:Label/asp:HyperLinkasp:Label ID="Label2" runat="server" Text='%# Bind("Abstract") %'/asp:Label/ItemTemplate/asp:TemplateField/Columns/asp:GridViewasp:Label ID="lblTotalCount" runat="server" Text="Orig Load"/asp:Label/ContentTemplateTriggersasp:AsyncPostBackTrigger ControlID="TabsPublications" EventName="ActiveTabChanged" //Triggers/asp:UpdatePanel/ContentTemplate/asp:UpdatePanel/ContentTemplate/ajaxToolkit:TabPanelajaxToolkit:TabPanel runat="Server" ID="Panel3" HeaderText="Tab2" ContentTemplateDo Something.../ContentTemplate/ajaxToolkit:TabPanel/ajaxToolkit:TabContainer

Clicking a tab does a complete postback and does not save the tab state nor does it seem to executeActiveTabChangedServer.

I think you need this instead, to get the right client-side control ID:

__doPostBack('<%= TabsPublications.ClientID %>', sender.get_activeTab().get_headerText());

Dead on, however I now notice that if I have a datagrid that performs a postback it now longer works. Ideas?

yeap, worked for me with a CLIENT ID too. Excellent! Thanks for help.

You may avoid postbacks by adding javascript and modifying your Hyperlink to simple link. (just an idea ...)

/asp:GridView runat="server" ID="PubsGridView" AutoGenerateColumns="False" ShowHeader="False" CellSpacing="5" GridLines="None"
Columns
asp:TemplateField
ItemTemplate
asp:HyperLink ID="HyperLink1" NavigateUrl='%# Bind("articleUrl") %' runat="server"asp:Label ID="Label1" runat="server" Text='%# Bind("articleName") %'/asp:Label/asp:HyperLink
asp:Label ID="Label2" runat="server" Text='%# Bind("Abstract") %'/asp:Label
/ItemTemplate
/asp:TemplateField
/Columns
/asp:GridView

Anyone got this to work when the scriptmanager is on the master page?

Yeah, and how do you guys get javascript working?

I have been trying to figure out how to do postback from Tab Container and this thead have helped me out to resolve this. Thanks guys!!!!!!!!!

Hello, I want to do the same thing, be able to load data from server eachtime I click on a Tab.

I read this forum and try the code provided, and also the code from thispage : http://willys-web.blogspot.com/2007/02/aspnet-ajax-control-toolkit-tab-control.html

The code from willy-web does work when I run it separatly in a new web site,from Visual Studio 2005. Try it, it works. When I put a break point in the codeinside the function ''DoServerSideValidation", I have a break when I clickon the second tab.

Perfect, I said, just have to fit it in my code. But even by copying the codeI can not run my freaking ''DoServerSideValidation" function !

I know it is possible, take a lookhereandhere . But I'd like to do it myself...

Lets have a look to the javascript function :

functionActiveTabChanged(sender, e)
{
alert('Hi !');
__doPostBack('<%= tabs1.ClientID %>', sender.get_activeTab().get_headerText());
}

This code is called, as I see a winpopup "Hi !" displayedwhen I click on one of my tabs...

Here is my TabContainer properties :

<cc1:TabContainerrunat="server"ID="tabs1"
OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="DoServerSideValidation">

DoServerSideValidation is never triggered. If someone can help me tounderstand where is the link between " __doPostBack('<%= tabs1.ClientID%>', sender.get_activeTab().get_headerText()); "

and my function DoServerSideValidation...

And why the code from willy-web doesn't not work inside my web project. Isit because I use a control ascx ? so in the page load I do this ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(tabs1);

You know what is funny ? The code I search is used when you are editing apost, here in this forum. (Tabs "Compose", "Options","Related", "Preview").

Ok, if someone have an idea of how this TabContainer works ... It would beappraciated...

Thanks for your help.