Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Aug 19, 2010 02:05 AM by Decker Dong - MSFT
Member
3 Points
34 Posts
Aug 18, 2010 08:21 AM|LINK
Hi All I am trying to show "Please wait..." message when i am trying to bind data to listview. I tried but its nottttanybody gives some idea.
Is there any Listview event where i can create a label and show my message.
Thx
Shekhar
All-Star
15176 Points
3304 Posts
Aug 18, 2010 10:42 AM|LINK
if you are using UpdatePanel then..
<asp:UpdateProgress ID="uupp1" runat="server" DynamicLayout="false"> <ProgressTemplate><b>Loading...</b><br /><img src="images/9.gif" alt="Loading" /></ProgressTemplate> </asp:UpdateProgress> <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional"> <ContentTemplate> Listview comes here </ContentTemplate> </asp:UpdatePanel>
Aug 18, 2010 11:43 AM|LINK
Thanx for your reply but still i am not able to see loading image when databind happen in listview.
Can u please give some more idea.... I have tried some diff way but i was't able to do.
Aug 18, 2010 11:51 AM|LINK
show me your source code...
Aug 18, 2010 12:21 PM|LINK
<asp:UpdateProgress ID="Up1" runat="Server" DynamicLayout="false" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<b>Loading...</b><br /><img src="/images/indicator-big.gif" alt="Please wait" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode ="Conditional" >
<ContentTemplate>
<asp:ListView ID="lvSearch" runat="server" OnItemDataBound="lvSearch_ItemDataBound"
OnSorting="lvSearch_Sorting" DataSourceID="odsSearch"
Visible="false">
//////
some code listview data bind
////
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGo" />
</Triggers>
</asp:UpdatePanel>
Aug 18, 2010 12:34 PM|LINK
Another way..
<script type="text/javascript"> function pageLoad(sender, args) { var sm = Sys.WebForms.PageRequestManager.getInstance(); if (!sm.get_isInAsyncPostBack()) { sm.add_beginRequest(onBeginRequest); sm.add_endRequest(onRequestDone); } } function onBeginRequest(sender, args) { var send = args.get_postBackElement().id; if (WaitMe(send) == "yes") { $find('Popup').show(); } } function onRequestDone() { $find('Popup').hide(); } function WaitMe(send) { switch (send) { case '<%=btnGo.ClientID%>': return ("yes"); break; default: return ("no"); break; } } </script> <asp:Button ID="HiddenButton" runat="server" Text="Hidden Button" Style="display: none;" /> <cc1:ModalPopupExtender ID="Popup" runat="server" TargetControlID="HiddenButton" BehaviorID="PWPopup" PopupControlID="pnlPopup" BackgroundCssClass="yourcss" /> <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress"> <div align="center" style="margin-top:13px;"> <b style="color: Navy">Processing ...</b><br /><img src="images/Wait.gif" alt="" /><br /> </div> </asp:Panel> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode ="Conditional" > <ContentTemplate> <asp:ListView ID="lvSearch" runat="server" OnItemDataBound="lvSearch_ItemDataBound" OnSorting="lvSearch_Sorting" DataSourceID="odsSearch" Visible="false"> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnGo" /> </Triggers> </asp:UpdatePanel>
Aug 18, 2010 01:45 PM|LINK
function pageLoad(sender, args) { var sm = Sys.WebForms.PageRequestManager.getInstance(); if (!sm.get_isInAsyncPostBack()) { sm.add_beginRequest(onBeginRequest); sm.add_endRequest(onRequestDone); } } function onBeginRequest(sender, args) { var send = args.get_postBackElement().id; if (WaitMe(send) == "yes") { $find('Popup').show(); } } function onRequestDone() { $find('Popup').hide(); } function WaitMe(send) { switch (send) { case '<%=btnGo.ClientID%>': return ("yes"); break; default: return ("no"); break; } }
when i try to run this code(Bold) throughs error "Microsoft JScript runtime error: 'null' is null or not an object"
Aug 18, 2010 05:40 PM|LINK
provide your full source
Aug 18, 2010 05:45 PM|LINK
refer, example: http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html
118619 Points
18779 Posts
Aug 19, 2010 02:05 AM|LINK
You can also look at this:
<%@ 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>
<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">
<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>
<td>
<td style="width: 100%">
<asp:UpdatePanel ID="upnlCustomer" runat="server">
<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>
</tbody>
</table>
</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></param>
protected void gvUpdateProgress_PageIndexChanging(object sender, GridViewPageEventArgs e)
System.Threading.Thread.Sleep(3000); // Loading image waiting period
gvUpdateProgress.PageIndex = e.NewPageIndex;
gvUpdateProgress.DataBind();
} PS: You can download the needed database here : http://code.msdn.microsoft.com/northwind/Release/ProjectReleases.aspx?ReleaseId=1401
shekhar1983
Member
3 Points
34 Posts
Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 08:21 AM|LINK
Hi All I am trying to show "Please wait..." message when i am trying to bind data to listview. I tried but its nottttanybody gives some idea.
Is there any Listview event where i can create a label and show my message.
Thx
Shekhar
suthish nair
All-Star
15176 Points
3304 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 10:42 AM|LINK
if you are using UpdatePanel then..
<asp:UpdateProgress ID="uupp1" runat="server" DynamicLayout="false"> <ProgressTemplate><b>Loading...</b><br /><img src="images/9.gif" alt="Loading" /></ProgressTemplate> </asp:UpdateProgress> <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional"> <ContentTemplate> Listview comes here </ContentTemplate> </asp:UpdatePanel>My Blog
shekhar1983
Member
3 Points
34 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 11:43 AM|LINK
Thanx for your reply but still i am not able to see loading image when databind happen in listview.
Can u please give some more idea.... I have tried some diff way but i was't able to do.
Shekhar
suthish nair
All-Star
15176 Points
3304 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 11:51 AM|LINK
show me your source code...
My Blog
shekhar1983
Member
3 Points
34 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 12:21 PM|LINK
<asp:UpdateProgress ID="Up1" runat="Server" DynamicLayout="false" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<b>Loading...</b><br /><img src="/images/indicator-big.gif" alt="Please wait" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode ="Conditional" >
<ContentTemplate>
<asp:ListView ID="lvSearch" runat="server" OnItemDataBound="lvSearch_ItemDataBound"
OnSorting="lvSearch_Sorting" DataSourceID="odsSearch"
Visible="false">
//////
some code listview data bind
////
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGo" />
</Triggers>
</asp:UpdatePanel>
suthish nair
All-Star
15176 Points
3304 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 12:34 PM|LINK
Another way..
<script type="text/javascript"> function pageLoad(sender, args) { var sm = Sys.WebForms.PageRequestManager.getInstance(); if (!sm.get_isInAsyncPostBack()) { sm.add_beginRequest(onBeginRequest); sm.add_endRequest(onRequestDone); } } function onBeginRequest(sender, args) { var send = args.get_postBackElement().id; if (WaitMe(send) == "yes") { $find('Popup').show(); } } function onRequestDone() { $find('Popup').hide(); } function WaitMe(send) { switch (send) { case '<%=btnGo.ClientID%>': return ("yes"); break; default: return ("no"); break; } } </script> <asp:Button ID="HiddenButton" runat="server" Text="Hidden Button" Style="display: none;" /> <cc1:ModalPopupExtender ID="Popup" runat="server" TargetControlID="HiddenButton" BehaviorID="PWPopup" PopupControlID="pnlPopup" BackgroundCssClass="yourcss" /> <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress"> <div align="center" style="margin-top:13px;"> <b style="color: Navy">Processing ...</b><br /><img src="images/Wait.gif" alt="" /><br /> </div> </asp:Panel> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode ="Conditional" > <ContentTemplate> <asp:ListView ID="lvSearch" runat="server" OnItemDataBound="lvSearch_ItemDataBound" OnSorting="lvSearch_Sorting" DataSourceID="odsSearch" Visible="false"> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnGo" /> </Triggers> </asp:UpdatePanel>My Blog
shekhar1983
Member
3 Points
34 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 01:45 PM|LINK
function pageLoad(sender, args) { var sm = Sys.WebForms.PageRequestManager.getInstance(); if (!sm.get_isInAsyncPostBack()) { sm.add_beginRequest(onBeginRequest); sm.add_endRequest(onRequestDone); } } function onBeginRequest(sender, args) { var send = args.get_postBackElement().id; if (WaitMe(send) == "yes") { $find('Popup').show(); } } function onRequestDone() { $find('Popup').hide(); } function WaitMe(send) { switch (send) { case '<%=btnGo.ClientID%>': return ("yes"); break; default: return ("no"); break; } }when i try to run this code(Bold) throughs error "Microsoft JScript runtime error: 'null' is null or not an object"
suthish nair
All-Star
15176 Points
3304 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 05:40 PM|LINK
provide your full source
My Blog
suthish nair
All-Star
15176 Points
3304 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 18, 2010 05:45 PM|LINK
refer, example: http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html
My Blog
Decker Dong ...
All-Star
118619 Points
18779 Posts
Re: Show "please wait.." unless untill ListView bind data completely
Aug 19, 2010 02:05 AM|LINK
You can also look at this:
<%@ 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></param>
/// <param></param>
protected void gvUpdateProgress_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
System.Threading.Thread.Sleep(3000); // Loading image waiting period
gvUpdateProgress.PageIndex = e.NewPageIndex;
gvUpdateProgress.DataBind();
}
}
PS: You can download the needed database here : http://code.msdn.microsoft.com/northwind/Release/ProjectReleases.aspx?ReleaseId=1401