UpdatePanelAnimationExtender - OnUpdating Will Always Play
Did you know that the when a partial postback starts, the OnUpdating animation for all of the UpdatePanelAnimationExtender's on the page will play. Here is part of the documentation taken from the UpdatePanelAnimationExtender page
It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes).
Unless I am mistaken, I believe this behavior is for the scenario where an UpdatePanel's UpdateMode is set to Conditional, and the code on the server handling the partial postback explicitly calls Update on the UpdatePanel. In this case, where logic on the server decides if an UpdatePanel is refreshed, the UpdatePanelAnimationExtender has no way of knowing if it should have played the OnUpdating animation before requesting the partial postback.
Why is this important? If in your OnUpdating animation you disable controls, display a progress bar, or modify the DOM in any other way that is reversed by the OnUpdated animation you will not have the opportunity to undo these effects. Here is a quick sample of this. I created a web page that contains 2 UpdatePanels, both have their UpdateMode set to 'Conditional' and both with corresponding buttons that trigger partial postbacks. An UpdatePanelAnimationExtender is created for each UpdatePanel and is responsible for disabling and re-enabling the buttons that trigger the postbacks.
<asp:Button ID="btnRefreshCustomers" runat="server" Text="Refresh Customers" /> <asp:UpdatePanel ID="udpCustomers" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnRefreshCustomers" /> </Triggers> <ContentTemplate> <asp:GridView runat="server" DataSourceID="sqldsCustomers" /> </ContentTemplate> </asp:UpdatePanel> <cc1:UpdatePanelAnimationExtender runat="server" TargetControlID="udpCustomers"> <Animations> <OnUpdating> <EnableAction AnimationTarget="btnRefreshCustomers" Enabled="false" /> </OnUpdating> <OnUpdated> <EnableAction AnimationTarget="btnRefreshCustomers" Enabled="true" /> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>
Because the OnUpdating animation runs for all UpdatePanelAnimationExtenders, when the 'Refresh Orders' button is clicked, both buttons are disabled (both OnUpdating animations are played), but because only the Orders panel was updated, only the Orders OnUpdated animation is run. As a result the 'Refresh Customers' button is left disabled and the page is now broken. You can try out the demo site here.
One alternative, as pointed out by the documentation, is to make sure all UpdatePanel's on your page have the UpdateMode set to 'Always' (this is the default value). Of course doing this means that any partial postback that occurs on the page will update the contents of all of the UpdatePanels, which may be unnecessary.
Hmm ... is this a glitch in the Matrix?
Comments
Could a possible fix be to add a in the block that would prevent the animation from firing off unless some particular if/then client side script were run first to determine whether it should be run or not? or perhaps it would be ConditionAnimation or CaseAnimation. Basically make it so that the OnUpdating animation will only fire off when specific variables return correctly, be they cookies or js variables. Does that make any sense?
Are there any known workarounds to this or any anticipated resolutions? Because this behavior really blows. I have multiple update panels on my page and one has animation that fades it out and back in when it's being updated. But, due to this odd rule, it fades out and never back in when the other update panel is updating. This is fruit. Thanks!
Yes it is possible to stop animation from happening. An example of this snippet is a javascript code that can be added to your OnUpdating() function.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (sender, args)
{
if (args.get_postBackElement().id == "control postingback")
{
//Do your OnUpdating() code to show panel for animation
})
The problem is that you can't know at the start of the postback which update panels will be updated afterward. Therefore, OnUpdating runs for all update panels.
You could do potentially some stuff with conditional targted animation blocks and client side code that sets some DOM properties depending on what triggers the postback.
Can we select the first record from the first grid view after it updated, to update the data in second gridview from the behind code?
Hi,
I took your example of creating a loading gif over a grid control and after adding it, experienced this problem because I had 2 updatepanels. I got around the problem by only keeping the onUpdated Animation within the extender to stop the gif from displaying. I kept your onUpdating JS function but call it from the code behind of the button_OnClick event...
btnSearch.Attributes.Add("onclick", "onUpdating()");
Now, even though I have multiple updatepanels, only one calls the extender to show the loading gif.
Hi Matt,
I think this is a serious limitation. I had a similar requirement in my project and could not use UpdataPanelAnimationExtender for multiple updatepanels. I have settled down with with UpdateProgress control but it does not have any built in mechanism of overlaying other controls. I used an extender from Raj (http://weblogs.asp.net/rajbk/archive/2007/01/08/using-the-updateprogress-control-as-a-modal-overlay.aspx ) to overcome this limitation.
Thanks,
Sunil
Hy
Im facing the same problem, using multiple UpdatePanels with UpdateMode="Conditional". It is not good practice to make all UpdatePanels always update its content since it will effect traffic performance and server resource.
From the link that Sunil Unnithan gives, The custom extender seems like no choice to make an animation, just progress template to display the loading text and image.
I still want to use UpdatePanelAnimationExtender and still studying the extender JS to make it working and easy to implement on any situation.
** My Idea is, find out if there is a way to add handler or add event to "Begin OnUpdating" (before animation OnUpdating start) and make a decision to cancel it.
Note that my current solution is to cancel the animation on EndRequest, by using:
animation.get_OnUpdatingBehavior().quit();
animation.get_OnUpdatedBehavior().play();
I got this idea from Math post ASP.NET AJAX: Canceling an async postback
Upon the EndRequest, the animation will simulate (again) an updated animation, however I got problem when UpdatePanel will blinking if you use fadein and fadeout animation - on UpdatePanel that is not update it content. freak. I will let you know my progress on this.
Im interested to write here because Matt blog helps me in many AJAX.NET problems. I hope Matt will still maintain his blog.
Thanx
LaNN