A web page with a data bound GridView control can take a long time to load. The page is not rendered until all the controls are, and the GridView cannot render before data has been retrieved from the database. So, let’s load the GridView asynchronous and make the page load faster and the perceived speed greater.
This little trick is actually very simple and it involves the built-in client callback feature of ASP.NET. Even though I’m not a big fan of that particular feature, it can be quite handy from time to time. The best part of this is that you don’t have to change much to your existing code.
On the webpage that hosts the GridView control, you have to make 2 small changes.
Step 1. Encapsulate the GridView
<asp:GridView runat="Server" ID="gvAsync" />
document.getElementById("grid").innerHTML = arg;
setTimeout("<asp:literal runat="server" id="ltCallback" />", 100);
In the code-behind file there are three small steps to perform.
Step 3. Implement ICallbackEventHandler
We need to implement the interface to turn on the client callback feature.
public partial class asyncgridview : System.Web.UI.Page, ICallbackEventHandler
Step 4. Bind the call back reference
ltCallback.Text = ClientScript.GetCallbackEventReference(this, "'bindgrid'", "EndGetData", "'asyncgrid'", false);
Step 5. Bind the grid and return the rendered HTML
private string _Callback;
public string GetCallbackResult()
public void RaiseCallbackEvent(string eventArgument)
DataTable table = RetrieveDataTableFromDatabase();
gvAsync.DataSource = table;
using (System.IO.StringWriter sw = new System.IO.StringWriter())
_Callback = sw.ToString();
You can use your present data binding method to bind the GridView. The important part is that the GridView is data bound before the RaiseCallbackEvent method renders the control.
The same technique can be used for all the data control such as the Repeater, FormView and DataList.