Stuart Hemming
Top achievements
Rank 2
Rank 2
Stuart Hemming
asked on 09 Oct 2009, 02:16 PM
I have a number of pages that all use a given master page.
The master page includes a RadAjaxManager and a LoadingPanel control.
I would like, if it possible to arrange it so, to have /all/ of the controls on the page blocked whenever and AJAX request fires and to have the LoadingPanel displayed.
I know I could modify /each/ page but I'd rather, if possible, have it all managed from the Master Page.
Is such a thing possible?
--
Stuart
6 Answers, 1 is accepted
0
Wim van der Linden
Top achievements
Rank 1
Rank 1
answered on 09 Oct 2009, 05:48 PM
Hey stuart,
I got a similair problem on my end,
It's not the best solution but I just thought I'll let you know.
what I did is create a div on the master page that is transparent and has width and height of the master page.
by default I have it hidden. On ajax request start I give the div style.display = "block" so it overlays all my content.
Then on request end style.display = "none" and everything is workable again.
It's a bit of a simplistic solution but no controls can be clicked or edited and that was my goal.
I'm not sure if that is your goal, but just for your consideration.
kind regards,
Wim
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 09 Oct 2009, 05:52 PM
Wim,
Thanks for that I'll give it a try and get back to you.
Just out of interest, are you using a loading panel on the page too?
--
Stuart
Thanks for that I'll give it a try and get back to you.
Just out of interest, are you using a loading panel on the page too?
--
Stuart
0
Wim van der Linden
Top achievements
Rank 1
Rank 1
answered on 09 Oct 2009, 05:55 PM
I used to have a loading panel on the screen.
but since I all ready created the div I moved the loading image to that same div and removed the loading panel.
Since it's just unnecessary overhead that way.
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 09 Oct 2009, 06:00 PM
oh yeah, clever.
--
Stuart
--
Stuart
0
Accepted
Wim van der Linden
Top achievements
Rank 1
Rank 1
answered on 09 Oct 2009, 06:09 PM
In case you might be interrested here's my code
style:
| <style type="text/css"> |
| .LoadingPanelOverlay |
| { |
| position:absolute; |
| z-index:1; |
| width:100%; |
| height:100%; |
| top:0px; |
| bottombottom:0px; |
| background-color:gray; |
| /* Below the opacity for all the different browsers */ |
| filter:alpha(opacity:50); |
| KHTMLOpacity:0.5; |
| MozOpacity:0.5; |
| opacity:0.5; |
| } |
| .ImageAlpha |
| { |
| /* Below the opacity for all the different browsers */ |
| filter:alpha(opacity:50); |
| KHTMLOpacity:0.5; |
| MozOpacity:0.5; |
| opacity:0.5; |
| } |
| </style> |
script:
NOTE THAT THE FOCUS IN THE ShowOverlay function IS NEEDED SO THINGS BEHIND THE DIV CANNOT BE EDITED
That maintained focus for initial input.
| function HideOverlay() { |
| document.getElementById('divLoadingOverlay').style.display = "none"; |
| } |
| function ShowOverlay() { |
| document.getElementById('divLoadingOverlay').style.display = "block"; |
| document.getElementById('divLoadingOverlay').focus(); |
| } |
Markup
1 thing about it, I used display:block initially to make it fill out on load so the image gets moved around correctly.
but for that the body unload should hide it.
<body onload="HideOverlay()">
| <div id="divLoadingOverlay" style="display:block;"> |
| <div class="LoadingPanelOverlay"> </div> |
| <img class="ImageAlpha" style="position:absolute; top:50%; left:50%; z-index:10;border: 0px" alt="Processing..." src='Images\ajax-loader.gif' |
| onload="this.style.marginLeft=(-1*this.width/2)+'px';this.style.marginTop=(-1*this.height/2)+'px';" /> |
| </div> |
hope this helps you,
sorry about not posting this sooner ^^
kind regards,
Wim
Wim
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 09 Oct 2009, 06:17 PM
Well played sir, well played.
--
Stuart
--
Stuart