Tuesday, October 4, 2011
Displaying Update progress at center of gridview
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
we can download North wind database from here. http://code.msdn.microsoft.com/northwind/Release/ProjectReleases.aspx?ReleaseId=1401
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
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>
/// <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();
}
}
