This is a migrated thread and some comments may be shown as answers.

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

5 Answers 311 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Nate Pinchot
Top achievements
Rank 1
Nate Pinchot asked on 22 Oct 2008, 03:33 PM
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.

5 Answers, 1 is accepted

Sort by
1
Accepted
Dimo
Telerik team
answered on 22 Oct 2008, 04:34 PM
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.
0
Nate Pinchot
Top achievements
Rank 1
answered on 23 Oct 2008, 09:10 PM
With a little modification, that did everything I needed.
Thanks for your help!
0
CSurieux
Top achievements
Rank 2
answered on 01 Sep 2009, 05:17 PM
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
0
Dimo
Telerik team
answered on 02 Sep 2009, 01:13 PM
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.
0
Kyaw
Top achievements
Rank 1
answered on 19 Jun 2012, 03:20 AM
Hi Dimo,

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

Thanks.
Wint Thu.
Tags
Ajax
Asked by
Nate Pinchot
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Nate Pinchot
Top achievements
Rank 1
CSurieux
Top achievements
Rank 2
Kyaw
Top achievements
Rank 1
Share this question
or