I have UpdatePanel, Grid and UpdateProgress controls, all working together using Ajax. When user does any action with the grid, Updateprogress shows nice animated gif "Loading adata...".
However, when the page loads, it takes 5 minutes to load data to the grid. There is no message, nothing, so the user may think he has Internet connection problems... How can I make Updateprogres to show the animated gif, when the page is initially loading data to the grid?
I was thinking maybe there is some event after the page loads, in this case I could load the data, after the page loads... Is it possible? What is the standard way to do it? Thanks
Hi rfurdzik,
When you want to have influence in the partial rendering of your page take a look at this:
http://ajax.asp.net/docs/overview/PageRequestManagerOverview.aspx
The PageRequestManager is the place to be to customize your partial rendering.
Regards,
In your case i would suggest to take a look at the: PageLoading event
"The pageLoading event is raised after the response from the server to an asynchronous postback is received but before any content on the page is updated. You can use this event to provide a custom transition effect for updated content."
Regards,
Hi I am not sure if that is what I need, I looked briefly at the link you gave me, but it seemsit points to PostBacks... I have no postback, this is the first time grid is loading. No user interaction occured yet, no postbacks. With postback works fine, just the initial load of data to the grid needs animation.
I am little bit lost in the info you gave me, would you guide me what event needs to be coded exactly and how to show the animation (I placed it in ProgressPanel)? Here is my scenario:
1) Page Loads
2) Animation shows "Loading data", grid is not visible yet
3) Data is loaded to the grid
4) Animation disappears
As I said earlier this is the initial load, first visit to the page, no postback yet...
There are two solutions:
The first you hide the gridview till the page completely loads and show only a progress image as shown below:
--------
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sales Details</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="Progress"><img alt="Loading..." src="indicator.gif" /> Loading... </div>
<div id="GridContainer" style="display:none">
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString%>" SelectCommand="SELECT TOP (10000) SalesOrderID, SalesOrderDetailID, CarrierTrackingNumber, OrderQty, ProductID, SpecialOfferID, UnitPrice, UnitPriceDiscount, LineTotal, rowguid, ModifiedDate FROM Sales.SalesOrderDetail"></asp:SqlDataSource>
</div>
</form>
<script type="text/javascript">
Sys.Application.add_init(function() {
$get("GridContainer").style.display = "";
$get("Progress").style.display = "none";
});
</script>
</body>
</html>
----------
The second solution is to induce a postback in load. In the sample below it is done by using a Timer control in the UpdatePanel. The GridView is not set to visible when the Page is not in PostBack and as soon as the timer starts a postback is done causing a partial page update which eventually causes UpdateProgress to be shown:
<%@. Page Language="C#" AutoEventWireup="true" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { GridView1.Visible = IsPostBack; Timer1.Enabled = !IsPostBack; }</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Sales Details</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdateProgress ID="Progress" runat="server"> <ProgressTemplate> <div> <img alt="Loading..." src="indicator.gif" />Loading...</div> </ProgressTemplate> </asp:UpdateProgress> <asp:UpdatePanel ID="GridContainer" runat="server"> <ContentTemplate> <div id="Div1"> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString%>" SelectCommand="SELECT TOP (10000) SalesOrderID, SalesOrderDetailID, CarrierTrackingNumber, OrderQty, ProductID, SpecialOfferID, UnitPrice, UnitPriceDiscount, LineTotal, rowguid, ModifiedDate FROM Sales.SalesOrderDetail"> </asp:SqlDataSource> </div> <asp:Timer ID="Timer1" runat="server" Interval="100"> </asp:Timer> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> </form></body></html>I think what youare reffering to is custom transition effect after postback. I have this functionality already done using Update panel and UpdateProgress controls. It all works.
What I need is to have the animation (under UpdateProgress) to be displayed during the INITIAL load of the page.
I was thinking maube no Ajax is needed in this case, maybe this can handled by standard ASP.NET code. Something like this (I am not sure what exactly events are):
1) Page load event - display animation (visble property = true), make grid invisible
2) Page loaded (?) - load data, (make grid visible, hide animation)
3) Postback - since I am changing the code now, not sure how the existing Ajax controls will behave (UpdatePanel + UpdateProgress...)
Hi rfurdzik,
Sorry that i didn't understand your question right. The option here above could give you a solution.
Regards,
yes, yes, your code makes sense. Thanks a lot!!! At least you understood what I need!
Dear Rama,
I like the second solution, it is very elegant. I do not fully understand the first one, but it is OK. I think your second solution needs to be modified in my case little bit. I am thinking to do this:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostback) {
LoadGridData();
}
GridView1.Visible = IsPostBack;
Timer1.Enabled = !IsPostBack;
}
As you see I have added additional if statement for loading the data to the grid, as showing the grid is not enough. Maybe that is why I was confused by the first example... Because I was thinking that even if youhide the grid,data load will occur, which will slow down my page load anyway... Maybe there is something I do not understand there...
However second solution seems will work for me...
Do you guys have some librarries with code? How do you find this? Do you organize your favorities in IE? That new IE is killing me, in version 7 it is so difficult to browse/bookmark anything if you have so many favorities. the reason is that it is all expended by deafault...
Oh, it is OK, your intention is the most important. You wanted to help! I may have not communicated well what I needed:) Thanks anyway for great info.
I have realized that the proposed second solution may also need to be changed more. This is the code I have in Page_Load:
if ((!Page.IsPostBack))
{
LoadData(15);
ViewState[
"CurrentTab"] ="0";// display the grid
}
As you can see I already check for Postback, I only load the data when it is first time load. This is of course for optimization purpose.
So now if I add timer code, we want the load of data to occur in THE FIRST POSTBACK ONLY. Not the first time the form is loading, but the first time postback is generated (by timer control). How would I acomplish this? I was thinking maybe setup a flag? I try this code, but it does not complie (I think some C# syntax issues, I am new to C#:))
m_DataLoaded = ((
Boolean)Session["m_DataLoaded"])=null ?true :false;
if ((Page.IsPostBack) & !(m_DataLoaded))
{
LoadData(15);
ViewState[
"CurrentTab"] ="0";
m_DataLoaded =
true;// display the grid
}
Session[
"m_DataLoaded"] = m_DataLoaded;
grdMyGrid.Visible = IsPostBack;
Timer1.Enabled = !IsPostBack;
What is wrong here? Something with casting I think... Please help.
Hirfurdzik ,
I used SqlDataSource control to bind to the grid which automatically binds the data provided the Grid is visible. So no penalty will be incurred.
Yes, I understand now. I can't figure this out what is wrong with my code, it compiles now, but getting error: m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false; if ((Page.IsPostBack) & !(m_DataLoaded)) { LoadData(15); ViewState["CurrentTab"] = "0"; m_DataLoaded = true; // display the grid } Session["m_DataLoaded"] = m_DataLoaded; grdMyGrid.Visible = IsPostBack; Timer1.Enabled = !IsPostBack;This is the error:Object reference not set to an instance of an object. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.Source Error: Line 96: m_dvInv = (DataView)(Session["m_dvInv"]);Line 97: Line 98: m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;Line 99: Line 100: if ((Page.IsPostBack) & !(m_DataLoaded))
Just changed editor back, beacuse the other one does not format. This one has some delay when typing, so many misstakes...
Yes, I understand now. I can't figure this out what is wrong with my code, it compiles now, but getting error:
m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;
if ((Page.IsPostBack) & !(m_DataLoaded))
{
LoadData(15);
ViewState["CurrentTab"] = "0";
m_DataLoaded = true;
// display the grid
}
Session["m_DataLoaded"] = m_DataLoaded;
grdMyGrid.Visible = IsPostBack;
Timer1.Enabled = !IsPostBack;
This is the error:
Object reference not set to an instance of an object.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Source Error:
Line 96: m_dvInv = (DataView)(Session["m_dvInv"]);
Line 97:
Line 98: m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;
Line 99:
Line 100: if ((Page.IsPostBack) & !(m_DataLoaded))
m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;
should be
m_DataLoaded = Session["m_DataLoaded"] ==null ? true : false
Thank you Rama Khrishna, it compiles fine and runs fine now. However the grid is not visible. So eighter the timer did not start, or something wrong with the logic. I will debug it now...
KevInKauai:
(it has to be possible :) )
marcgel: