Displaying Update progress at center of gridview





0/5 (0 vote)
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
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>
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>
///
<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();
}
}
C#
code
/// <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();
}
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