User control does not render in AJAX Control Toolkit TabContainer control

Question

When I click the "add tab" button, server side code (tabs.ActiveTabIndex+=1) changes tabs, but the tab looks empty. If I click back and forth, I could see the user control renders. Am I missing something?

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="90%" Width="100%"
        ActiveTabIndex="0" OnDemand="true" AutoPostBack="false" TabStripPlacement="Top"
        CssClass="ajax__tab_xp" ScrollBars="None" UseVerticalStripPlacement="false" VerticalStripWidth="120px">
        <ajaxToolkit:TabPanel ID="tab1" runat="server" HeaderText="1">
            <ContentTemplate>
                <uc:UCCommSubmit ID="ucCommInfo" runat="server" />
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="" Visible="false">
            <ContentTemplate>
                <uc:UCCommSubmit ID="UCCommSubmit1" runat="server" />
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="" Visible="false">
            <ContentTemplate>
                <uc:UCCommSubmit ID="UCCommSubmit2" runat="server" />
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    <div style="padding-right: 20px; float: right">
        <asp:Button ID="btnNext" runat="server" Text="Add Tab" 
            onclick="btnNext_Click" />
    </div>


protected void btnNext_Click(object sender, EventArgs e)
    {
        if (TabContainer1.Tabs.Count > TabContainer1.ActiveTabIndex + 1)
        {
            TabContainer1.Tabs[TabContainer1.ActiveTabIndex + 1].HeaderText = (TabContainer1.ActiveTabIndex + 1).ToString();
            TabContainer1.Tabs[TabContainer1.ActiveTabIndex+1].Visible = true;
            TabContainer1.ActiveTabIndex += 1;
        }
    }

Answer 1

I'm not sure if this is related but i had similar problems a few months ago. Here is the answer on SO which links to forums.asp.net that contains detailed informations: https://stackoverflow.com/a/6307930/284240

It could also be caused by changing the ActiveTabIndex from codebehind without triggering the ActiveTabChanged event of the TabContainer.

Try to use this javascript function onclick of your button, that causes the TabContainer to trigger this event:

function changeActiveTab(tabContainerID,tabIndex){
    var ctrl = $find(tabContainerID);
    ctrl.set_activeTab(ctrl.get_tabs()[tabIndex]);
}

Then you can handle the event and change the visibility of your UserControls (and update UpdatePanels if necessary).

I just noticed that i answered another similar question here on SO:

Have you tried to set the ActiveTab-Property(from codebehind) or the ActiveTabIndex from codebehind or aspx?

You could also check if it works if you explicitly set the display to visible:

ActiveTabIndex="0" style="display:block;visibility:visible;"

Are you sure that the Ajax libraries are loaded correctly? Do you have other Ajax-Controls inside of your TabContainer? Check if all of your html in that page is valid.

Are you using the latest AjaxToolkit and the ToolkitScriptManager instead of the ScriptManger?