Want to let datagrid load after page_load (AJAX)

Hello,

I have a datagrid that gets its data from a stored procedure (executed using a data adapter). It is quite slow, so I want the page to load everything first, display it to the user, and then show a 'loading' message in the div where the datagrid resides while the data for it is being fetched. How can I do this using AJAX?

Regards,

Ahmed Zainal

If you put the grid in a panel (Panel A) and have a second panel (Panel B) with a loading gif.

Put a refresh button in with the grid in Panel A. Put both panels in an update panel.

In on page load do not load anything into the grid and set Panel A visibility to false and set Panel B visibility to true.

Create a method that handles the refresh buton on click event server side and add the code to populate the grid in it.

Wire up the update panel to show the loading gif panel when it does a partial page post back and hide it again when the postback response is recieved.

In javascript fire the on click event for the refresh button in the page on load event.

Hope that makes some sense. If not I can try and put some code togethrt for you tonight after work as an example?

Richard,

Thank you for your prompt response! Just one thing. when you say:

"In javascript fire the on click event for the refresh button in the page on load event."

How do I call the refresh on click event in javascript?

For a button declared as:

<asp:ButtonID="Button_Refresh"runat="server"OnClick="Button_Refresh_OnClickEventHandler"/>

JavaScript:

window.onload = init();

function init() {

__doPostBack('<%= Button_Refresh.ClientID %>','');

}

I think that should do it.

Try this http://dotnetslackers.com/articles/ajax/ASPNETAjaxGridAndPager.aspx

Hello

Sorry for the late reply. Internet was down on our lan since this morning!

I found a different method using an ajax timer. I set the interval to 1 millisecond and it calls the timer.tick event straight after the page loads. In the code, I set the enabled property of the timer to false so that it does not keep ticking. I also use an AJAX updateprogress control which displays the loading gif. This works great but I get another problem. I have another AJAX control that uses next and previous buttons to display news articles. If I click on one of these buttons while the datagrid is loading, the datagrid starts loading again but never binds!

Thank you and I really appreciate your help!

Hi

This could be anything, try implementing queuing. Some link below that might help:

Genral tips (Queuing half way down):http://www.codeproject.com/Ajax/aspnetajaxtips.asp

Async calling:http://forums.asp.net/p/1068907/1553801.aspx#1553801

Queuing class:http://www.cmarshall.net/MySoftware/ajax/index.html

Hope one of these helps.