Hi all,
Hope doing well,
i am making one application where i am fetching huge data from database to gridview.
for this it was taking some 30 to 40 seconds. so instead of showing nothing in the page
i am using update panel and update progress bar.
everything is ok but when progress image is showing in the page that time it's moving only one time and stop and before completing page postback.
here is my code:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
var popup = $find('<%= modalPopup.ClientID %>');
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args)
{
if (prm.get_isInAsyncPostBack())
args.set_cancel(true);
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'block';
if (popup != null) {
popup.show();
}
}
function EndRequest(sender, args)
{
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'none';
if (popup != null) {
popup.hide();
}
}
function ShowProgress() {
document.getElementById('<% Response.Write(UpdateProgress1.ClientID); %>').style.display = "inline";
}
</script>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<%-- <asp:Image ID="Img" ImageUrl="~/AjaxProgressBig.gif" AlternateText="Processing" runat="server" /> --%>
<div style="background-color: Gray; filter:alpha(opacity=60); opacity:0.60; width: 100%; top: 0px; left: 0px; position: fixed; height: 100%;">
</div>
<div style="margin:auto;
font-family:Trebuchet MS;
filter: alpha(opacity=100);
opacity: 1;
font-size:small;
vertical-align: middle;
top: 40%;
position: fixed;
right: 42%;
color: #275721;
text-align: center;
background-color: White;
height: 80px;">
<table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
<tr>
<td style=" text-align: inherit;"><asp:Image ID="Image1" runat="server" ImageUrl="~/progress_3.gif" /></td>
<td style=" text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">Loading...</span></td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
and here is my code behind:
protected void Button1_Click(object sender, EventArgs e)
{
con.Open();
SqlCommand com = new SqlCommand("select * from processdailydata", con);
SqlDataAdapter sda = new SqlDataAdapter(com);
DataSet ds = new DataSet();
sda.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
con.Close();
}
i want to show progress image move regularly untile page load is not finished.
thanks in advance.
