RadAjaxLoadingPanel in UserControl to span full browser

[Duncan Evans]

I have a RadAjaxLoadingPanel in a user control (I develope with Sitefinity) and i am trying to make the full browser screen shade or overlay with a transparency when someone clicks a button to perform a action, i have found some info on this within the forums but none talk about it from within a usercontrol.

Could somone help me get this working? This is what i have so far:

html,
body,
form
{
    min-height:100%; /*all except IE6*/
    margin:0;
    padding:0;
}

* html html,
* html body,
* html form
{
    height:100%; /*IE6 only*/
}

body {
    background-color: #5b9cda;
}

....etc....

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="NewsletterSignupMini.ascx.cs"
    Inherits="UserControls_NewsletterSignupMini" %>
<telerik:RadCodeBlock runat="server">

    <script type="text/javascript">

   function centerUpdatePanel()
   {
        centerElementOnScreen(document.getElementById("<%=RadAjaxLoadingPanel1.ClientID%>"));
   }

   function centerElementOnScreen(element)
   {
        var scrollTop = document.body.scrollTop;
        var scrollLeft = document.body.scrollLeft;
        var viewPortHeight = document.body.clientHeight;
        var viewPortWidth = document.body.clientWidth;

        if (document.compatMode == "CSS1Compat")
        {
         viewPortHeight = document.documentElement.clientHeight;
         viewPortWidth = document.documentElement.clientWidth;
         scrollTop = document.documentElement.scrollTop;
         scrollLeft = document.documentElement.scrollLeft;
        }

        var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2);
        var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2);
        var top = scrollTop + topOffset - 40;
        var left = scrollLeft + leftOffset - 70;
           element.style.position = "absolute";
        element.style.top = top + "px";
        element.style.left = left + "px";
    }
    </script>

</telerik:RadCodeBlock>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
    ClientEvents-OnRequestStart="centerUpdatePanel();">
    <table border="0" cellspacing="0" cellpadding="0" class="NewsletterTable">
        <tr>
            <td class="Name">
                <telerik:RadTextBox ID="txtFirstName" runat="server" EmptyMessage="First Name" SkinID="sknNewsletterMini_Name"
                    TabIndex="1" ValidationGroup="valNewsletterForm">
                </telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="valreqFirstName" runat="server" Display="Dynamic"
                    ControlToValidate="txtFirstName" ValidationGroup="valNewsletterForm" />
            </td>
            <td class="Name">
                <telerik:RadTextBox ID="txtLastName" runat="server" EmptyMessage="Last Name" SkinID="sknNewsletterMini_Name"
                    TabIndex="2" ValidationGroup="valNewsletterForm">
                </telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="valreqLastName" runat="server" Display="Dynamic"
                    ControlToValidate="txtLastName" ValidationGroup="valNewsletterForm" />
            </td>
            <td rowspan="2" class="Button">
                <asp:ImageButton ID="btnNewsletterSignup" runat="server" SkinID="sknNewsletterMini_Button"
                    TabIndex="4" OnClick="btnNewsletterSignup_Click" ValidationGroup="valNewsletterForm" />
            </td>
        </tr>
        <tr>
            <td colspan="2" class="Email">
                <telerik:RadTextBox ID="txtEmail" runat="server" EmptyMessage="Email Address" SkinID="sknNewsletterMini_Email"
                    TabIndex="3" ValidationGroup="valNewsletterForm">
                </telerik:RadTextBox>
                <asp:RegularExpressionValidator ID="valexpEmail" runat="server" Display="Dynamic"
                    ControlToValidate="txtEmail" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                    ValidationGroup="valNewsletterForm" /><asp:RequiredFieldValidator ID="valreqEmail"
                        runat="server" Display="Dynamic" ControlToValidate="txtEmail" ValidationGroup="valNewsletterForm" />
            </td>
        </tr>
    </table>
</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true"
    Skin="Web20" Style="position: absolute; top: 0px; left: 0px; width: 100%; height:100%" EnableSkinTransparency="true"
    Transparency="20">
</telerik:RadAjaxLoadingPanel>

This is not filling the whole screen, instead is seems to be the size of the control container... It is centered on the screen though. Additionally i am unable to see the Web20 skin loading gif...

Any help would be great

Duncan

[Duncan Evans]

Anyone have any input?

[Iana Tsolova]

Hello Duncan,

I followed your scenario and prepared a sample project for you. Please try it on your end and let me know if it works for you and if any issues arise.

Kind regards,
Iana
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.