UpdatePanelAnimationExtender: No animation when certain button clicked

Question

Hi there,

I have a GridView inside an UpdatePanel that is populated when a search is performed on the page. When it is populated or the page changed, it performs a fade animation. There are other operations that I want to perform that update the UpdatePanel, but I don't want these to perform these fade animations. The closest I have found on the ASP forums is: http://forums.asp.net/p/1037038/1487096.aspx

The problem with the solution proposed in that thread is that there is no way to catch the Updated and Updating events to animate. Any ideas?

Thanks,

Nick

Answer 1

Nick,

Is it possbile to consider using JQuery to do the animations? May give you more control on the elements than just the use of the UpdatePanelAnimationExtender.

http://jquery.com/

http://docs.jquery.com/UI/Effects

Answer 2

Just wanted to add some code for this answer, since I managed to discover a good solution to this using code from different places. :) (some was pasted, some edited; the final version of this isn't tested, but you should be able to get the idea from it!)

var postbackElement; // Global to store the control that initiated the postback

// Using JQuery here
$(document).ready(function()
{
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
});

function beginRequest(sender, args)
{
    postbackElement = args.get_postBackElement();

    // This method can be used to do animations in place of OnUpdating

    if(postbackElement.id == "YourControlId")
    {
      // or something like: if(id == "<%= YourControl.ClientID %>")

      // run your animation here
    }
}

function pageLoaded(sender, args)
{
    // This method can be used to do animations in place of OnUpdated

    // Also, the args variable holds a list of panels that are being updated;
    // I didn't use this though.

    // This condition is true on the first page load
    if (typeof(postbackElement) === "undefined")
    {
        return;
    }

    if(postbackElement.id == "YourControlId")
    {
      // run your animation here
    }
}