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

6 posts, 1 answers
  1. Nate Pinchot
    Nate Pinchot avatar
    59 posts
    Member since:
    Jan 2008

    Posted 22 Oct 2008 Link to this post

    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.
  2. Answer
    Dimo avatar
    8485 posts

    Posted 22 Oct 2008 Link to this post

    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";

    All the best,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Nate Pinchot
    Nate Pinchot avatar
    59 posts
    Member since:
    Jan 2008

    Posted 23 Oct 2008 Link to this post

    With a little modification, that did everything I needed.
    Thanks for your help!
  4. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 01 Sep 2009 Link to this post


    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.

  5. Dimo
    Dimo avatar
    8485 posts

    Posted 02 Sep 2009 Link to this post

    Hello Christian,

    Please refer to


    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.
  6. Kyaw
    Kyaw avatar
    10 posts
    Member since:
    Apr 2012

    Posted 18 Jun 2012 Link to this post

    Hi Dimo,

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

    Wint Thu.
Back to Top