TabPanel/UpdatePanelAnimation problem

I’ve started using the TabContainer/TabPanel control from the AJAX Toolkit for the first time and I’m having a problem using an UpdatePanel with an UpdatePanelAnimation.

Basically I have two panels, both contain UpdatePanels and an UpdatePanelAnimation. When working within one tab, the UpdatePanelAnimation works perfectly, simple fades the controls out/in while it updates. However, the content of any other tabs seem to disappear!

I’ve stuck together a simple example, which is listed below.

Has anyone came across this problem? Or am going about the TabPanel/UpdatePanel/UpdatePanelAnimation thing the wrong way?

As a side note, I have tried having the whole TabContainer within an UpdatePanel. Turns out there is a bug which throws a JS error. A fix for this can be found here http://forums.asp.net/thread/1549317.aspx (3rd post) and means you have to edit and recompile the AjaxToolkit source

tabtest.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tabtest.aspx.cs" Inherits="tabtest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ajax:TabContainer ID="TabContainer1" runat="server">
                <ajax:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab One">
                    <ContentTemplate>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                        <ajax:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
                            TargetControlID="UpdatePanel1">
                            <Animations>
                                <OnUpdating>
                                    <Sequence>
                                        <Parallel duration=".25" Fps="30">
                                            <FadeOut minimumOpacity=".1" />
                                        </Parallel>
                                    </Sequence>
                                </OnUpdating>
                                <OnUpdated>
                                    <Sequence>
                                        <Parallel duration=".25" Fps="30">
                                            <FadeIn minimumOpacity=".1" />
                                        </Parallel>
                                    </Sequence>
                                </OnUpdated>
                            </Animations>
                        </ajax:UpdatePanelAnimationExtender>
                    </ContentTemplate>
                </ajax:TabPanel>
                <ajax:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab Two">
                    <ContentTemplate>
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            <ContentTemplate>
                            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                        <ajax:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender2" runat="server"
                            TargetControlID="UpdatePanel2">
                            <Animations>
                                <OnUpdating>
                                    <Sequence>
                                        <Parallel duration=".25" Fps="30">
                                            <FadeOut minimumOpacity=".1" />
                                        </Parallel>
                                    </Sequence>
                                </OnUpdating>
                                <OnUpdated>
                                    <Sequence>
                                        <Parallel duration=".25" Fps="30">
                                            <FadeIn minimumOpacity=".1" />
                                        </Parallel>
                                    </Sequence>
                                </OnUpdated>
                            </Animations>
                        </ajax:UpdatePanelAnimationExtender>
                    </ContentTemplate>
                </ajax:TabPanel>
            </ajax:TabContainer>
        </div>
    </form>
</body>
</html>

tabtest.aspx.cs


using System;

public partial class tabtest : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = TextBox1.Text;
        TextBox1.Text = String.Empty;
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label2.Text = TextBox1.Text;
        TextBox2.Text = String.Empty;
    }
}

I had the same problem using a TabContainer with some update panels in tabpanes.

I got around it by making some javascript to fade in the update panels associated with each tabpane as I navigate to it (because they were getting faded out during async postbacks on other tabs). I noticed that if you hadn’t navigated to the tab yet, IE had the updatepanel’s width explicitly set to 0, so even if you fade back in, it still wouldnt’ display (but firefox would). I used js like this for my onclientactivetabchanged event in my tabcontainer:

function TabChanged(sender, e)
{
var activeTab = sender.get_activeTabIndex();
if (activeTab == 2)
{
var updatePanel = $get(‘<%= tab2updatePanel.ClientID %>’);
if (updatePanel.style.width == “0px”)
updatePanel.style.width = “”;
AjaxControlToolkit.Animation.FadeInAnimation.play(updatePanel, 0.2 , 20 , 0.35, 1, true);
}
}

After all is this a bug or just a flaw that MS specialists have missed?

Signed up just to say my thanks to MrBoogedy.

I was doing the same exact thing but dynamically building everything for a SharePoint web part. I wound up having to inject the javascript like this:

LazyLoadScriptBuilder.Append(" var updatePanel = $get(‘" + up.ClientID + "’); updatePanel.style.width = \“\”;AjaxControlToolkit.Animation.FadeInAnimation.play(updatePanel, 0.2 , 20 , 0.35, 1, true);");

Then register the javascript with the scriptmanager.registerstartupscript.

From there, just hook it up to the tabcontainser’s onclientactivetabchanged and play!