Home > AJAX > AJAX UpdatePanel Animation Extender with Gridview

AJAX UpdatePanel Animation Extender with Gridview


try this example:

In Design mode

<%@ 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" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<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');

        //  get the gridview element       
        var gridView = $get('<%= this.gvCustomers.ClientID %>');
        // make it visible
        updateProgressDiv.style.display = '';    
        // 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);
     var x;
     var y;
     // do the math to figure out where to position the element
         //  center of gridview
         x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
         y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);    
     else if($get('rdoTopLeft').checked){
         //  top left of gridview
         x = gridViewBounds.x;
         y = gridViewBounds.y;
         //  top right of gridview
         x = (gridViewBounds.x + gridViewBounds.width - updateProgressDivBounds.width);
         y = gridViewBounds.y;

     // 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';

    <form id="form" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server" />
            &nbsp;<p style="background-color:AliceBlue; width:95%">
                Example of using an UpdatePanelAnimationExtender to place an animated gif over a GridView while the<br />
                GridView is being refreshed.  Click the column headers or the paging buttons to cause the grid to refresh<br />
                You can toggle where the animation is to be displayed using the radio buttons<br />
                <input id="rdoCenter" type="radio" name="location" value="center" checked="checked" />Center
                <input id="rdoTopLeft" type="radio" name="location" value="topleft" />Top Left
                <input id="rdoTopRight" type="radio" name="location" value="topright" />Top Right
            <br />
            <br />
            <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
            <asp:UpdatePanel ID="updatePanel" runat="server">
                    <asp:GridView ID="gvCustomers" runat="server" AllowPaging="True" AllowSorting="True"
                        PageSize="20" DataSourceID="sqldsCustomers" Width="95%">
                        <AlternatingRowStyle BackColor="AliceBlue" />
                        <HeaderStyle HorizontalAlign="Left" />
            <asp:SqlDataSource ID="sqldsCustomers" runat="server"
                SelectCommand="select customerid, companyname, contactname, contacttitle from dbo.customers" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" />
            <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel">
                        <Parallel duration="0">
                            <%-- place the update progress div over the gridview control --%>
                            <ScriptAction Script="onUpdating();" /> 
                        <Parallel duration="0">
                            <%--find the update progress div and place it over the gridview control--%>
                            <ScriptAction Script="onUpdated();" />
            <div id="updateProgressDiv" style="background-color:#CF4342; display:none; position:absolute;">
                <span style="color:#fff; margin:3px">Loading ...</span>

in code behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (this.IsPostBack)

Hope it helps

Good Luck

  1. March 28, 2010 at 5:14 pm

    thanks it’s really help

  2. yasserzaid
    April 8, 2010 at 6:31 am

    @animated wallpaper : you are welcome

  1. February 11, 2009 at 6:52 am
  2. July 6, 2014 at 7:01 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: