AJAX ToolKit TabContainer: can I capture the "Active change of the tab bar" event

Question

I have an AJAX ToolKit TabContainer element with multiple TabPanels . I want to check the contents of the currently active TabPanel so that the user does not work with others in case the data was invalid.

Answer 1

If you need to make the TabPanelChangingEvent SERVER tab, you will need to do this by changing the source code of ajaxcontroltoolkit.

The good news: you can easily get it.

Answer 2

Here's a new solution that does practically what you need:

• OnClientActiveTabChanged event raised
• The index of the new tabcontainer stored in Hiddenfield
• tabindex is a reset to it old value (therefore it will not change right now)
• The form launches asyncpostback with a hidden button.
• The hidden Click event button extracts OldTabIndex and NewTabIndex files.
• At the end of the Click event, tabindex tabtainer tabindex switches to the new value.

Thus, the hidden Click event button is executed before the TabContainer tab is changed.

Aspx:

 <asp:Button runat="server" ID="hiddenTargetControlForTabContainer" style="display:none" /> <asp:UpdatePanel ID="TabContainerUpdatePanel" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="hiddenTargetControlForTabContainer" /> </Triggers> <ContentTemplate> <asp:HiddenField ID="TabContainerActiveTab" runat="server" Value="0" /> <AjaxControlToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="OrderTabContainerClientActiveTabChanged" > <AjaxControlToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1" > <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate> </AjaxControlToolkit:TabPanel> <AjaxControlToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2" > <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </ContentTemplate> </AjaxControlToolkit:TabPanel> </AjaxControlToolkit:TabContainer> </ContentTemplate> </asp:UpdatePanel> <script type="text/javascript"> var TabContainerActiveTabControlID = '<%= TabContainerActiveTab.ClientID %>'; var hiddenTargetControlForTabContainerControlID = '<%= hiddenTargetControlForTabContainer.uniqueID %>'; function OrderTabContainerClientActiveTabChanged(sender, args) { var TabContainerActiveTabControl = $get(TabContainerActiveTabControlID); var OldtabIndex = parseInt(TabContainerActiveTabControl.value); var NewtabIndex = sender.get_activeTabIndex(); if (!(OldtabIndex == NewtabIndex)) { sender.set_activeTabIndex(OldtabIndex); TabContainerActiveTabControl.value = NewtabIndex; __doPostBack(hiddenTargetControlForTabContainerControlID, ''); } } 

Code behind:

 Protected Sub hiddenTargetControlForTabContainer_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles hiddenTargetControlForTabContainer.Click Dim oldActiveTabIndex = TabContainer1.ActiveTabIndex Dim newActiveTabIndex As Integer = Convert.ToInt32(TabContainerActiveTab.Value) 'your stuff here TabContainer1.ActiveTabIndex = newActiveTabIndex End Sub 

Answer 3

Problem: Ajax TabContainer ActiveTabChanged event shows invalid ActiveTabIndex. E.g. TabContainer contains 3 tabs, if the second tab is hidden ( visible = false on the server side), then when the third tab is clicked, we get ActiveTabChanged = 1 not 2 (the expected active index is 2 on the server side).

Decision:

• Log the clientide tab container event:

   OnClientActiveTabChanged="Tab_SelectionChanged" 

• Then define a javascript function to handle the above event, which will internally store the tab index in a hidden variable.

   function Tab_SelectionChanged(sender,e) { document.getElementById('<%=hdntabIndex.ClientID %>').value = sender.get_activeTabIndex(); } 

• Use the hidden variable ( hdntabIndex ) in the code where you need the active tab index.

Answer 4

You must do this using JavaScript.
Here is an example that I did, the trick is to use a ValidationGroup and save the tab "Old Tab" at the end of the function called OnClientActiveTabChanged

  <AjaxControlToolkit:TabContainer ID="TabContainer1" runat="server" Height="138px" Width="402px" ActiveTabIndex="0" OnClientActiveTabChanged="ValidateTab" > <AjaxControlToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1" > <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1" ValidationGroup="TabPanel1" /> </ContentTemplate> </AjaxControlToolkit:TabPanel> <AjaxControlToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2" > <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox2" ValidationGroup="TabPanel2" /> </ContentTemplate> </AjaxControlToolkit:TabPanel> </AjaxControlToolkit:TabContainer> <script type="text/javascript"> var OldtabIndex = 0; function ValidateTab(sender, args) { if (OldtabIndex == 0) { if (!Page_ClientValidate('TabPanel1')) { sender.set_activeTabIndex(OldtabIndex); } } else if (OldtabIndex == 1) { if (!Page_ClientValidate('TabPanel2')) { sender.set_activeTabIndex(OldtabIndex); } } OldtabIndex = sender.get_activeTabIndex(); } </Script> 

Answer 5

I know that I'm probably late to answer this question, but hopefully I can offer some help to someone who worked like I was on TabPanels.

Add OnClientActiveTabChanged = "showMap" in ajaxToolkit: TabContainer . My function is obviously called showMap (I had to hide and show the Google Street Map because TabContainer twists it all. So I had to move the Google Street map outside the container and then "fake" it back into the container).

 <ajaxToolkit:TabContainer runat="server" ID="tabs" OnClientActiveTabChanged="showMap"> <ajaxToolkit:TabPanel runat="server" ID="pnlZones" HeaderText="Delivery Zones"> <ContentTemplate> ... </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> 

Then create javascript:

 <script type="text/javascript"> function showMap() { var tabID = $('.ajax__tab_active').attr('id'); if (tabID.indexOf('pnlZone') > 0) { $('#mapHider').css('height', '600px'); } else { $('#mapHider').css('height', '0'); } } </script> 

Then we can find the active tab with the class .ajax__tab active , and this is what TabContainer will set for the active class. Run the identifier ( .attr ('id') ) using jQuery ... And now we see which tab we are now.

To do this, I change the class height from 0 to 600 pixels. With overflow set to hidden, it makes the map appear to be on the page and only in this container, but it is not.

Hope this helps! Good luck.