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.

Web page

On the webpage that hosts the GridView control, you have to make 2 small changes.

Step 1. Encapsulate the GridViewThe GridView control has to be encapsulated by an HTML control with an id attribute, so that it can be referenced by JavaScript. That is because the GridView does not render when no data is bound to it.

Step 5. Bind the grid and return the rendered HTMLTo finish the asynchronous loading we have to implement the two methods that are defined by the ICallbackEventHandler interface we implemented in step 3. One of the methods binds a DataTable to the GridView and renders the control. The second returns the rendered HTML to the JavaScript method we defined in step 2.