I have an ASP.NET page with gridview control in it. The gridview is gonna take about 40 seconds to load the data. I want the page to completely load the rest content while the gridview is loading data, just like the "Recommended Readings" in this link http://forums.asp.net/members/franksun.aspx.
Any ideas how to achieve that?
hi, it is indeed simple. You'll have to start the postback after the page has loaded from the client, so subscribe to the window.onload handler. This fires after the page has loaded. Here you want to instantiate a postback and request the data via a partial
postback.
You can use the updatepanel for the partial postback, updateprogress to display a status(something to signal that there is work taking place) and to instantiate the postback, the easiest way to do this is to use a button control whose display is set to none
in css.
It is indeed overkill to use a button for just this purpose. But I don't know if the alternative is suiting you more since you'll need to register a postback manually. It's not hard, so if you prefer that approach better, then use just that instead of working
around with a button control as in the sample code below. Reference the following document to register and get a postback event reference that you can use in your code.
Ok, it's not a whole lot of code, so you will probably understand what's going on by simply looking at the code. If you have some questions feel free to ask :-)
<%@ Page Language="c#" %>
<%@ Import Namespace="System.Threading" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> //dummy data...don't concern yourself with this :-)
ICollection CreateDataSource()
{
// Create sample data for the DataList control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
// Populate the table with sample values.
for (int i = 0; i < 9; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Description for item " + i.ToString();
dr[2] = 1.23 * (i + 1);
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
protected void Button1_Click(object sender, EventArgs e)
{
//remove the sleep. It's simply there to immitate your long running operation :D:D Thread.Sleep(3000);//remove this
GridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
</script>
Thanks a lot, alessandro. It's really helpful. I have a little problem running the code. the updateprocess panel was not triggered after the button1 was clicked?
Marked as answer by franksun on Jul 31, 2009 06:57 PM
mmm i just tested the code i posted and it works as advertised
Or perhaps you mean you tried to adapt it to your current code and the updateprogress is not showing ? If so, try to paste your code here :-)
To test the code i provided here, simply add a brand new .aspx file in your project(without codebehind class), and select all the contents, delete them and replace it with the code in I provided you in the previous post and run.
I had a similar requirement and was able to use this technique successfully. However I'm not able to get the UpdateProgress control to function. Even when I pasted your code into a blank aspx page the UpdateProgress text was not showing. I've gotten it
to work with update panels before, but not when using this technique. Any insite?
I had a similar requirement and was able to use this technique successfully. However I'm not able to get the UpdateProgress control to function. Even when I pasted your code into a blank aspx page the UpdateProgress text was not showing. I've gotten it
to work with update panels before, but not when using this technique. Any insite?
hi, I've re-tested the code and apparently the UpdateProgress is not working as you've mentioned. I'm not sure what has changed since then and now. I notice in my posting that I was quite insistent and sure the code works. I'm as stupefied as you are, but
it's best to move on and look for a better solution. Trying to figure why this control is not working is a lost investment, simply because this control brings very little to the table and it's not very flexible that I myself ended up rewriting from scratch
for my own usage.
Really, all you need is a div in the page and then show/hide it in the apposite handlers triggered during an async postback. This is also what the control does in the background while limiting you in how it is consumed.
I have added the modifications you need below :
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function pageLoaded(sender,args) {
var gridView1=$get('<%= GridView1.ClientID %>');
var button1=$get('<%= Button1.ClientID %>');
if(gridView1===null)
button1.click();
}
function BeginRequestHandler(sender,args) {
var elem=args.get_postBackElement();
if(elem.id=='<%= Button1.ClientID %>') {
var updateProgress1=$get('<%= UpdateProgress1.ClientID %>');
updateProgress1.style.display='';
}
}
function EndRequestHandler(sender,args) {
var updateProgress1=$get('<%= UpdateProgress1.ClientID %>');
updateProgress1.style.display='none';
}
</script>
As you can note from above we are doing what the updateprogress control fails to do on it's own. At this point, you can very well use a normal div and show/hide it instead of the updateProgress as I am doing above.
franksun
Member
1 Points
5 Posts
how to load gridview after the page is completely loaded?
Jul 29, 2009 07:05 PM|LINK
Hello there,
I'm sure this is easy but I can't figure it out:
I have an ASP.NET page with gridview control in it. The gridview is gonna take about 40 seconds to load the data. I want the page to completely load the rest content while the gridview is loading data, just like the "Recommended Readings" in this link http://forums.asp.net/members/franksun.aspx. Any ideas how to achieve that?
Thanks in advance.
Frank Sun
alessandro
Contributor
6800 Points
1105 Posts
Re: how to load gridview after the page is completely loaded?
Jul 29, 2009 11:09 PM|LINK
hi, it is indeed simple. You'll have to start the postback after the page has loaded from the client, so subscribe to the window.onload handler. This fires after the page has loaded. Here you want to instantiate a postback and request the data via a partial postback.
You can use the updatepanel for the partial postback, updateprogress to display a status(something to signal that there is work taking place) and to instantiate the postback, the easiest way to do this is to use a button control whose display is set to none in css.
It is indeed overkill to use a button for just this purpose. But I don't know if the alternative is suiting you more since you'll need to register a postback manually. It's not hard, so if you prefer that approach better, then use just that instead of working around with a button control as in the sample code below. Reference the following document to register and get a postback event reference that you can use in your code.
http://msdn.microsoft.com/en-us/library/ms223392.aspx
Ok, it's not a whole lot of code, so you will probably understand what's going on by simply looking at the code. If you have some questions feel free to ask :-)
<%@ Page Language="c#" %>
<%@ Import Namespace="System.Threading" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
//dummy data...don't concern yourself with this :-)
ICollection CreateDataSource()
{
// Create sample data for the DataList control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
// Populate the table with sample values.
for (int i = 0; i < 9; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Description for item " + i.ToString();
dr[2] = 1.23 * (i + 1);
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
protected void Button1_Click(object sender, EventArgs e)
{
//remove the sleep. It's simply there to immitate your long running operation :D:D
Thread.Sleep(3000);//remove thisGridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" ChildrenAsTriggers="false"
UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
GridView is updating, please hold on..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server" style="display:none" OnClick="Button1_Click" />
</form>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args)
{
var gridView1 = $get('<%= GridView1.ClientID %>');
var button1 = $get('<%= Button1.ClientID %>');
if (gridView1 === null)
button1.click();
}
</script>
</body>
</html>
franksun
Member
1 Points
5 Posts
Re: how to load gridview after the page is completely loaded?
Jul 30, 2009 07:34 PM|LINK
Thanks a lot, alessandro. It's really helpful. I have a little problem running the code. the updateprocess panel was not triggered after the button1 was clicked?
alessandro
Contributor
6800 Points
1105 Posts
Re: how to load gridview after the page is completely loaded?
Jul 30, 2009 08:08 PM|LINK
hi, your welcome.
mmm i just tested the code i posted and it works as advertised
Or perhaps you mean you tried to adapt it to your current code and the updateprogress is not showing ? If so, try to paste your code here :-)
To test the code i provided here, simply add a brand new .aspx file in your project(without codebehind class), and select all the contents, delete them and replace it with the code in I provided you in the previous post and run.
alessandro
Contributor
6800 Points
1105 Posts
Re: how to load gridview after the page is completely loaded?
Jul 30, 2009 08:14 PM|LINK
Also make sure you have a sleep in the button click as in my code sample.
Thread.Sleep(3000);
Just beware not to keep it in production code, that's the only reason why i had this line scratched out in the code i posted :-)
Otherwise, the page will load too fast before you see the updateprogress. It's just to fake your long running process.
franksun
Member
1 Points
5 Posts
Re: how to load gridview after the page is completely loaded?
Jul 31, 2009 07:07 PM|LINK
It worked!! Thank you, Alessandr. I really appreciate your hlep.
alessandro
Contributor
6800 Points
1105 Posts
Re: how to load gridview after the page is completely loaded?
Jul 31, 2009 07:56 PM|LINK
your welcome. Thanks for reporting back :-)
have a good weekend.
bruendt
Member
4 Points
2 Posts
Re: how to load gridview after the page is completely loaded?
Nov 11, 2009 10:18 PM|LINK
I had a similar requirement and was able to use this technique successfully. However I'm not able to get the UpdateProgress control to function. Even when I pasted your code into a blank aspx page the UpdateProgress text was not showing. I've gotten it to work with update panels before, but not when using this technique. Any insite?
alessandro
Contributor
6800 Points
1105 Posts
Re: how to load gridview after the page is completely loaded?
Nov 12, 2009 12:01 AM|LINK
hi, I've re-tested the code and apparently the UpdateProgress is not working as you've mentioned. I'm not sure what has changed since then and now. I notice in my posting that I was quite insistent and sure the code works. I'm as stupefied as you are, but it's best to move on and look for a better solution. Trying to figure why this control is not working is a lost investment, simply because this control brings very little to the table and it's not very flexible that I myself ended up rewriting from scratch for my own usage.
Really, all you need is a div in the page and then show/hide it in the apposite handlers triggered during an async postback. This is also what the control does in the background while limiting you in how it is consumed.
I have added the modifications you need below :
<script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded); Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function pageLoaded(sender,args) { var gridView1=$get('<%= GridView1.ClientID %>'); var button1=$get('<%= Button1.ClientID %>'); if(gridView1===null) button1.click(); } function BeginRequestHandler(sender,args) { var elem=args.get_postBackElement(); if(elem.id=='<%= Button1.ClientID %>') { var updateProgress1=$get('<%= UpdateProgress1.ClientID %>'); updateProgress1.style.display=''; } } function EndRequestHandler(sender,args) { var updateProgress1=$get('<%= UpdateProgress1.ClientID %>'); updateProgress1.style.display='none'; } </script>As you can note from above we are doing what the updateprogress control fails to do on it's own. At this point, you can very well use a normal div and show/hide it instead of the updateProgress as I am doing above.
This is also by far the most flexible solution.
Have a good day,
bruendt
Member
4 Points
2 Posts
Re: how to load gridview after the page is completely loaded?
Nov 12, 2009 05:36 PM|LINK
Great, at least I'm not crazy. This is just the direction I was headed. Thanks for your help!