+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / RadAjaxLoadingPanel in UserControl to span full browser

RadAjaxLoadingPanel in UserControl to span full browser

2 posts, 0 answered
  1. Duncan Evans
    Duncan Evans avatar
    122 posts
    Registered:
    07 Jul 2009
    23 Sep 2009
    Link to this post
    I posted this on the Telerik forums but have not received any reply yet, was wondering if someone here could help me:

    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
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    26 Sep 2009
    Link to this post
    Hi Duncan Evans,

    Thank you for using our services.

    I have taken a look at the user control that you have sent. It looked OK, I have modified it slightly so that the overlay takes up the whole screen. However there seems to be a problem with IE running in compatibility mode (versions earlier than IE 8) displaying the loading gif. You can try to manually add the gif to your theme with the following css:
    .RadAjax_Web20 .raDiv 
        background-imageurl(yourpath) !important; 
        } 

    I am attaching the updated user control and the loading image.

    Greetings,
    Radoslav Georgiev
    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.
2 posts, 0 answered