Multiple Update Panels Problem

hello!

I have 4 update panels on my page, 2 of which I used to load slow loading data displayed in gridviews. I wanted to display the layout of the page before it loads the data (showing a small loading graphic in the updated divs) so the user does not think the page is stuck. To do this, I used two timer controls with interval 1 so that once the page is loaded, the timers will tick and the data will be fetched and bound to the gridviews. I am facing a few problems:

1. One gridview's data is slower than the other, and instead of the faster one displaying first then the slower one, it waits until the slower one fetches its data and then they are both displayed at the same time.

2. I have another gridview that uses a timer (interval 6000) and the timer_tick sub for it scrolls through the gridview pages. But the timer does not start ticking until the other two gridviews load.

3. The 4th update panel has a next and previous button displaying news articles. The buttons do not cause anything until the two slow panels load (just like the gridview in point 2 above).

Is there another way I can trigger the two slow gridviews to load AFTER the page loads and displays something for the user? And why do the other update panels wait for these two slow panels to finish before letting the user update them?

Your speedy support is greatly appreciated!

Make sure that you set UpdateMode="Conditional" on all the update panels to be able to update them individually. Otherwise they will all update their contents on postback.

Call UpdatePanel.Update() on the ones that should be updated.

Try delay loading your update panel like the following:
http://mattberseth.com/blog/2007/07/delay_load_an_updatepanel.html

Wow thanks for the replies! I'll try this stuff out and let you know!

OK I tried Matt Berseth's delay load approach. For some reason, the __doPostBack method does not force the button click method to be invoked. As a result, the two gridviews do not load.

<script type="text/javascript" language=javascript>
var _isInitialLoad = true;

function pageLoad(sender, args){
if(_isInitialLoad){
_isInitialLoad = false;
// simulate a button click by forcing the postback
// causing the updatepanel to update
__doPostBack("<%= me.btnHidden.ClientID %>","");
}
}
</script>

<asp:button id="btnHidden" runat="server" style="display:none;" OnClick="btnHidden_Click" />

<asp:UpdatePanel id="UpdatePanel4" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnHidden" Eventname="Click"></asp:AsyncPostBackTrigger>
</Triggers>

// the content of this panel is a gridview.. the btnHidden_Click sub binds the data to the gridview..

Any ideas?

Just an update.. I changed the dopostback call from

__doPostBack("<%= me.btnHidden.ClientID %>","")

to

__doPostBack("<%= me.btnHidden.UniqueID %>","")

that worked but the updateprogress control did not appear (the screen looked like it finished loading and then suddenly the gridviews got displayed).

I really appreciate your assistance!

Hi,

I've created a user control that I'm trying to use to delay content loading on a page for long running controls.check out this:Delaying Content Load using Timer and UpdatePanel

Best Regards

Hey man thanks for the update but the link refers to this site: http://www.null.com/t/1127147.aspx

which displays nothing! ;-) can you plz update with the proper link so i can test?

thx for ur help!

Thanks for the control Jin-Yu,

Here's the url
http://forums.asp.net/t/1127147.aspx