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>
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>