Wednesday, March 28, 2012

Multiple UpdatePanels with Animations

I have three UpdatePanels on a web page. Each of them has an Animation that makes them fade out and back in when updating. I have set the UpdateMode to conditional but when I update one of the panels the other two fade out and don't come back. Does any one have an idea of what's going on here?

Thanks in Advance!!!!!!

I have the same problem ...


This works for me

<body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="ScriptManager" /> <div> <asp:UpdatePanel runat="server" ID="up1" UpdateMode="conditional"> <ContentTemplate> 1:<%=DateTime.Now.ToLongTimeString%> </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="Button1" EventName="click" /></Triggers> </asp:UpdatePanel> <asp:UpdatePanel runat="server" ID="up2" UpdateMode="conditional"> <ContentTemplate> 1:<%=DateTime.Now.ToLongTimeString%> </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="Button2" EventName="click" /></Triggers> </asp:UpdatePanel> <asp:UpdatePanel runat="server" ID="up3" UpdateMode="conditional"> <ContentTemplate> 1:<%=DateTime.Now.ToLongTimeString%> </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="Button3" EventName="click" /></Triggers> </asp:UpdatePanel> <asp:Button runat="server" ID="Button1" Text="Button1" /> <asp:Button runat="server" ID="Button2" Text="Button2" /> <asp:Button runat="server" ID="Button3" Text="Button3" /> <ajaxToolkit:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="up1"> <Animations> <OnUpdated> <Color Duration="1" StartValue="#FF0000" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor" /> </OnUpdated> </Animations></ajaxToolkit:UpdatePanelAnimationExtender><ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="up2"> <Animations> <OnUpdated> <Color Duration="1" StartValue="#00FF00" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor" /> </OnUpdated> </Animations></ajaxToolkit:UpdatePanelAnimationExtender><ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender2" runat="server" TargetControlID="up3"> <Animations> <OnUpdated> <Color Duration="1" StartValue="#0000FF" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor" /> </OnUpdated> </Animations></ajaxToolkit:UpdatePanelAnimationExtender> </div> </form></body>

Thanks!!! It works great.

No comments:

Post a Comment