AJAX ToolKit TabContainer: Can I capture the "Active Tab Panel Changing" event

I have an AJAX ToolKit TabContainer control wit开发者_运维问答h several TabPanels. I want to validate the contents of the current active TabPanel to prevent user from working on other ones in case data was invalid.

---

If you need to do a TabPanelChangingEvent SERVER side, You will need to do this by Altering the ajaxcontroltoolkit Source code.

Good news : you could easily get it

---

Here a new solution that does almost what your need :

1. The OnClientActiveTabChanged event is raised
2. The tabcontainer New Tab index is saved in a Hiddenfield
3. The tabindex is reset to it's old value (so it wont change right now)
4. The form trigger a asyncpostback using a hidden button.
5. Within the hidden button's Click event, the OldTabIndex and NewTabIndex are retrieved.
6. At the end of the Click event, the tabcontainer's tabindex is switched to the new value.

So, the hidden button's Click event 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

---

Problem: Ajax TabContainer the ActiveTabChanged event shows incorrect ActiveTabIndex. For eg. TabContainer contain 3 tabs, if second tab is hide(visible = false on server side) then on click of third tab, we get ActiveTabChanged = 1 not 2 (expected active index is 2 on server side code).

Solution:

1. Register the clientside event of the tab container:

   OnClientActiveTabChanged="Tab_SelectionChanged" 
   

2. Then define the 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();
   } 
   

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

---

You should do it using JavaScript.
Here an example I made, the trick is to use ValidationGroup and save the Old tab Index at the end of the function called by the 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>      

---

I know I'm probably late to answering this question, but hopefully, I can offer some assistance to someone who's pot-committed like I was to the TabPanels.

Add the OnClientActiveTabChanged="showMap" to the ajaxToolkit:TabContainer. My function is obviously called showMap (had to hide and show the Google Street Map, because TabContainer screws it all up. So I had to move the Google Street Map outside of the container and then 'fake' put it back in 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 the 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>

We can then find the active tab by the class .ajax__tab active, which is what TabContainer will set the active class to. Snag the ID (.attr('id')) with jQuery... And voila, we now which tab we're currently on.

For this I change the height of the class from 0 to 600px. With the overflow set to hidden, it makes it seem like the map is on the page and only in that container, but it isn't.

Hopefully, this helps!! Good luck.