Matt Berseth

 I recently was working on an Asp.Net project that contained quite a few search pages.  These pages all followed a similar structured pattern where the user had a set of fields they could filter on by typing in values and pressing the search button.  The results were displayed in a GridView where the user could sort by clicking on column headers, export the results to excel, etc...  To help improve user experience, we placed each of the GridViews in an asp UpdatePanel so while the user refined the search (sorting, adding or removing additional filters), only the GridView would be refreshed and not the entire page.  Additionally, we wanted to add a few standard UI cues (disabling the Search button, fading out the GridView, and placing a progress indicator over the GridView) letting the user know an operation was currently in progress.

Download Code | View live demo

It turned out that adding these UI cues was pretty easy with the help of the UpdatePanelAnimationExtender.  Applying the first 2 cues (disabling the Search button and fading out the GridView) were really simple since there were already a couple of Animation Actions already defined specifically for these tasks.  Placing the animated gif in the center of the GridView was only slightly more difficult.  After the wrapping the GridView inside the UpdatePanel and defining the Search button as the trigger, I added the markup for the UpdateProgressAnimationExtender, specify which animations I would like and when they should run.  As you can see in the code snippet below, I am telling the extender control to run the ScriptAction, EnableAction and FadeOut actions both OnUpdating (when the panel starts the async-postback) and OnUpdated (when the panel has been refreshed).  When OnUpdating runs, the onUpdating javascript function is invoked centering the animated gif over the GridView, the btnSearch asp:Button is disabled, and the contents of the UpdatePanel are faded-out.  OnUpdated fires the animations that are responsible for reversing these actions - the btnSearch button is re-enabled, the UpdatePanel is faded back in, and the onUpdated javascript function is invoked removing the animated gif.         

<asp:UpdatePanel ID="updatePanel" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:GridView ID="gvCustomers" runat="server" AllowPaging="true" AllowSorting="true"
            PageSize="20" DataSourceID="sqldsCustomers" Width="95%">
            <AlternatingRowStyle BackColor="aliceBlue" />
            <HeaderStyle HorizontalAlign="Left" />
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>
<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel">
    <Animations>
        <OnUpdating>
            <Parallel duration="0">
                <%-- place the update progress div over the gridview control --%>
                <ScriptAction Script="onUpdating();" />  
                <%-- disable the search button --%>                       
                <EnableAction AnimationTarget="btnSearch" Enabled="false" />
                <%-- fade-out the GridView --%>
                <FadeOut minimumOpacity=".5" />
             </Parallel>
        </OnUpdating>
        <OnUpdated>
            <Parallel duration="0">
                <%-- fade back in the GridView --%>
                <FadeIn minimumOpacity=".5" />
                <%-- re-enable the search button --%>  
                <EnableAction AnimationTarget="btnSearch" Enabled="true" />
                <%--find the update progress div and place it over the gridview control--%>
                <ScriptAction Script="onUpdated();" /> 
            </Parallel> 
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
<div id="updateProgressDiv" style="display: none; height: 40px; width: 40px">
    <img src="Img/dot-net-green.gif" />
</div>

Like I mentioned earlier, centering the animated gif was only slightly more work.  To accomplish this I included a fixed width div tag containing the image and set its display style to none.  Then when the OnUpdating animation fires the ScriptAction, I find the div, set the display back to visible, figure out the bounds of both the GridView and the progress div, and finally I do the math to determine when the div needs to be placed to overlay the GridView.  The onUpdated function just sets the display style of the div back to none.  Here are the functions ...

function onUpdating(){
    // get the update progress div
    var updateProgressDiv = $get('updateProgressDiv'); 
    // make it visible
    updateProgressDiv.style.display = '';

    //  get the gridview element        
    var gridView = $get('<%= this.gvCustomers.ClientID %>');
    
    // get the bounds of both the gridview and the progress div
    var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
    var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
    
    //    do the math to figure out where to position the element (the center of the gridview)
    var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
    var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
    
    //    set the progress element to this position
    Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);        
}

function onUpdated() {
    // get the update progress div
    var updateProgressDiv = $get('updateProgressDiv'); 
    // make it invisible
    updateProgressDiv.style.display = 'none';
}

Here is the complete markup for the page ...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
    
    function onUpdating(){
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv'); 
        // make it visible
        updateProgressDiv.style.display = '';

        //  get the gridview element        
        var gridView = $get('<%= this.gvCustomers.ClientID %>');
        
        // get the bounds of both the gridview and the progress div
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
        
        //    do the math to figure out where to position the element (the center of the gridview)
        var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
        var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
        
        //    set the progress element to this position
        Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);        
    }

    function onUpdated() {
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv'); 
        // make it invisible
        updateProgressDiv.style.display = 'none';
    }
    
    </script>

</head>
<body>
    <form id="form" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server" />
        <div>
            <asp:SqlDataSource ID="sqldsCustomers" runat="server" 
                SelectCommand="select customerid, companyname, contactname, contacttitle from dbo.customers"
                SelectCommandType="Text" ConnectionString="server=mberseth;database=northwind;Trusted_Connection=yes;" />
            
            <p>
                Example of using an UpdatePanelAnimationExtender to place an animated gif over a GridView while the 
                GridView is being refreshed.
            </p>
            <br />
            <table border="0" width="95%">
                <tr>
                    <td align="center">Customer ID</td>
                    <td align="right"><asp:TextBox ID="txtCustomerID" runat="server" /></td>
                    <td align="center">Company Name</td>
                    <td align="right"><asp:TextBox ID="txtCompanyName" runat="server" /></td>
                    <td align="center">Contact Name</td>
                    <td align="right"><asp:TextBox ID="txtContactName" runat="server" /></td>
                </tr>                                
                <tr>
                    <td colspan="6" align="right"><asp:Button ID="btnSearch" runat="server" Width="75" Text="Search" OnClick="BtnSearch_Click" /></td>
                </tr>
            </table>
            <br />
            
            <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
            <asp:UpdatePanel ID="updatePanel" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                    <asp:GridView ID="gvCustomers" runat="server" AllowPaging="true" AllowSorting="true"
                        PageSize="20" DataSourceID="sqldsCustomers" Width="95%">
                        <AlternatingRowStyle BackColor="aliceBlue" />
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
            <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel">
                <Animations>
                    <OnUpdating>
                        <Parallel duration="0">
                            <%-- place the update progress div over the gridview control --%>
                            <ScriptAction Script="onUpdating();" />  
                            <%-- disable the search button --%>                       
                            <EnableAction AnimationTarget="btnSearch" Enabled="false" />
                            <%-- fade-out the GridView --%>
                            <FadeOut minimumOpacity=".5" />
                         </Parallel>
                    </OnUpdating>
                    <OnUpdated>
                        <Parallel duration="0">
                            <%-- fade back in the GridView --%>
                            <FadeIn minimumOpacity=".5" />
                            <%-- re-enable the search button --%>  
                            <EnableAction AnimationTarget="btnSearch" Enabled="true" />
                            <%--find the update progress div and place it over the gridview control--%>
                            <ScriptAction Script="onUpdated();" /> 
                        </Parallel> 
                    </OnUpdated>
                </Animations>
            </ajaxToolkit:UpdatePanelAnimationExtender>
            <div id="updateProgressDiv" style="display: none; height: 40px; width: 40px">
                <img src="Img/dot-net-green.gif" />
            </div>
        </div>
    </form>
</body>
</html>