In this article I am explaining about how to show Loading... image using Update Progress at center of grid view. for this article i have used North wind database to bind grid view
Aspx code
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<%@
Register Assembly="System.Web.Entity,
Version=3.5.0.0, Culture=neutral,
PublicKeyToken=b77a5c561934e089"
Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<!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
runat="server">
<title>Update
Progress Sample</title>
<script type="text/javascript">
function onUpdating() {
var updateProgressDiv = document.getElementById('upCustomer');
var gridView = document.getElementById('gvUpdateProgress');
var gridViewBounds =
Sys.UI.DomElement.getBounds(gridView);
var updateProgressDivBounds =
Sys.UI.DomElement.getBounds(updateProgressDiv);
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);
Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
}
</script>
</head>
<body>
<form id="frmUpdateProgress" runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="font-family: Calibri;
background-color: #3366CC; color: #FFFFFF;
visibility: hidden;
width: 100%">
UpdateProgress
Sample
</td>
</tr>
<tr>
<td style="border: medium dotted Navy; font-family: Calibri;
color: Purple;
width: 100%;
border-color: Red;
border-top-width: thick;">
<asp:UpdateProgress
ID="upCustomer"
AssociatedUpdatePanelID="upnlCustomer" runat="server">
<ProgressTemplate>
<div id="imgdivLoading"
align="center"
valign="middle"
runat="server"
style="border-style: dotted;
padding: inherit;
margin: auto;
position: absolute; visibility:
visible; vertical-align: middle;
border-color: #000066
black black
black; border-width: medium">
<asp:Image ID="imgLoading" runat="server" ImageUrl="Images/loading.gif" Width="34px" />Loading...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="width: 100%">
<asp:UpdatePanel
ID="upnlCustomer" runat="server">
<ContentTemplate>
<asp:GridView ID="gvUpdateProgress"
runat="server"
AutoGenerateColumns="False" DataKeyNames="CustomerID"
AllowPaging="True"
CellPadding="4"
ForeColor="#333333" GridLines="None"
Font-Names="Calibri"
OnPageIndexChanging="gvUpdateProgress_PageIndexChanging" Width="100%" Caption="UpdateProgress
Sample">
<RowStyle
BackColor="#EFF3FB" />
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="City"
HeaderText="City" SortExpression="City"
/>
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="Country"
HeaderText="Country" SortExpression="Country" />
<asp:BoundField DataField="Phone"
HeaderText="Phone" SortExpression="Phone" />
</Columns>
<FooterStyle
BackColor="#507CD1" Font-Bold="True"
ForeColor="White" />
<PagerStyle
BackColor="#2461BF" BorderStyle="None"
ForeColor="White" HorizontalAlign="Right"
Height="15px" />
<SelectedRowStyle BackColor="#D1DDF1"
Font-Bold="True" ForeColor="#333333"
/>
<HeaderStyle
BackColor="#507CD1" Font-Bold="True"
ForeColor="White" />
<EditRowStyle
BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White"
/>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
C#
code
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Data;
using
System.Data.SqlClient;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public partial class
_Default :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs
e)
{
gvUpdateProgress.Attributes.Add("onclick", " onUpdating();");
// adding java script to grid view.
bindGrid();
}
/// <summary>
/// Getting Customer table data from North wind database to
bind gridview
///
</summary>
private void bindGrid()
{
SqlConnection conn = new SqlConnection("Trusted_Connection=yes;Addr=Localhost;Initial
Catalog=Northwind");
SqlCommand
cmdCustomer = new SqlCommand("SELECT
[CustomerID],[CompanyName],[ContactName],[City],[PostalCode],[Country],[Phone]
FROM Customers", conn);
SqlDataAdapter
adptCustomer = new SqlDataAdapter(cmdCustomer);
DataSet dsCustomer = new
DataSet();
adptCustomer.Fill(dsCustomer,"Customer");
gvUpdateProgress.DataSource = dsCustomer.Tables["Customer"].DefaultView;
gvUpdateProgress.DataBind();
}
///
<summary>
///
///
</summary>
///
<param
name="sender"></param>
///
<param
name="e"></param>
protected void
gvUpdateProgress_PageIndexChanging(object sender, GridViewPageEventArgs
e)
{
System.Threading.Thread.Sleep(3000); // Loading image waiting period
gvUpdateProgress.PageIndex =
e.NewPageIndex;
gvUpdateProgress.DataBind();
}
}
This article is for
single gridview controls. If we have more than one gridviews in your page we
have to change javascript. If you have any concerns
and comments please write to me.
Hope this example helps you.
Happy coding.
Srinivas Kotra.
srinivas.kotra@gmail.com