Possible to make Loading Panel "modal"? (cover whole screen?)

[Nate Pinchot]

Is there any way to make a Loading Panel cover the whole screen (i.e. a Loading Panel "modal"). During a save operation I would find it much easier to cover the whole screen and block using the save, delete, etc so they are only clicked once. This would also stop the user from accidentally clicking the menu and navigating away from the page during the save operations.

I realize that there are events which I could use to hide/show buttons and etc but that would be a pain in the butt to hide the menu on the Master Page and I am just looking for a simple solution here and I would think that just covering the whole screen with a Loading Panel "modal" would be the best option.

I tried using a RadWindow to accomplish this and it works okay but it just really looks strange.

[Dimo]

Hi Nate,

Yes, this is possible.

You will need to make the loading panel sticky (IsSticky="True"), place it as a direct child of the page <form> element, make it absolutely positioned and set its width and height to be 100%. In this way the loading panel will cover the whole page during AJAX requests.

There is one thing to note - if your page is more than one screen, the loading panel will not expand beyond the first screen, unless you recalculate the page height on the client and set height to the loading panel in pixels.

In other words, the complete solution for your case is:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30" BackColor="Red" IsSticky="true" style="position:absolute;top:0;left:0" Width="100%" Height="100%" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
ClientEvents-OnRequestStart="adjustLoadingPanelHeight();" />

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function adjustLoadingPanelHeight()
{
    $get("<%= RadAjaxLoadingPanel1.ClientID %>").style.height = document.documentElement.scrollHeight + "px";
}
</script>
</telerik:RadScriptBlock>



All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Nate Pinchot]

With a little modification, that did everything I needed.
Thanks for your help!

[CSurieux]

Hello,

Using version 2009.2.826 I take this code, it works quite perfectly but when I have a very long page and we click a button on the page bottom, (under IE8 not tested for others), we are unable to see the image because it is displayed in the middle height of full page which is outside the screen.

Is there any way to determinate where is the screen windows on page is and to center image in it?

Many thanksfor help.

CS

[Dimo]

Hello Christian,

Please refer to

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-make-a-radajaxloadingpanel-span-over-the-whole-page.aspx

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kyaw]

Hi Dimo,

This is not working for long page. Is there any solution for this issue?

Thanks.
Wint Thu.