Control button visibility depending on active tab on AjaxToolKit:TabControl

Question

I have an ASP.NET page containing a button, an AjaxToolKit TabControl and two TabPanels. I would like to have the button enabled, when tab #0 is selected and disabled, if any other tab is selected/active.

However, I don't even get the code to compile correctly.

My attempt is

<asp:Content ID="Foobar" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">
<script  type="text/javascript">
    function CanSave(sender,e)) {
        var tabContainer = window.$get('<%=tcMain.ClientID%>');
        if (tabContainer != undefined && tabControl != null) {
            tabContainer = tabControl.control;
            document.getElementById('<%=ButtonSave.ClientID %>').disabled = (tabContainer.ActiveTabIndex == 0);
        }
    }
</script> 
    <asp:Button ID="ButtonSave" runat="server" Enabled="false" OnClick="ButtonSave_Click" Text="Save" Width="8.8em" />
    <ajaxToolkit:TabContainer runat="server" ID="tcMain" OnActiveTabChanged="CanSave">
       <ajaxToolkit:TabPanel ID="tpOne" runat="server" HeaderText="One">
         <ContentTemplate>
         ...                    
         </ContentTemplate>
       <ajaxToolkit:TabPanel ID="tpTwo" runat="server" HeaderText="Two">
         <ContentTemplate>
         ...                    
         </ContentTemplate>
    </ajaxToolkit:TabContainer>


</asp:Content>  

The scripting stuff was all collected from the internet. I have to admit, that I don't know anything about jscript, ASP.NET and so on, but I have to find a way to toggle the visibility of that button ButtonSave.

Please give me some hints into the right direction. Thanks in advance.

Answer 1

Here is my solution. The trick is to use the OnClientActiveTabChanged event. Quite obvious, isn't it?

<asp:Content ID="Foobar" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">
<script  type="text/javascript">
    function CanSave(sender,e)) {
        var tabContainer = window.$get('<%=tcMain.ClientID%>');
        if (tabContainer != undefined && tabControl != null) {
            tabContainer = tabControl.control;
            document.getElementById('<%=ButtonSave.ClientID %>').disabled = (tabContainer.get_activeTabIndex() == 0);
        }
    }
</script> 
    <asp:Button ID="ButtonSave" runat="server" Enabled="false" ... />
    <ajaxToolkit:TabContainer 
       runat="server" 
       ID="tcMain" 
       OnClientActiveTabChanged="CanSave">

...

Answer 2

OnActiveTabChanged is not a client side event. You will have to write code in your code behind file for this to work. Note that this event will cause a PostBack and refresh your page when a tab changes.

protected void tbcRatingMaster_ActiveTabChanged(object sender, EventArgs e)
{
 if (tbcRatingMaster.ActiveTabIndex == 0) //First tab
 {
   ButtonSave.Enabled = false;
 }
}