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

RadAjaxLoadingPanel in UserControl to span full browser

2 Answers 65 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Duncan Evans
Top achievements
Rank 1
Duncan Evans asked on 18 Sep 2009, 09:24 PM
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 Answers, 1 is accepted

Sort by
0
Duncan Evans
Top achievements
Rank 1
answered on 23 Sep 2009, 09:42 PM
Anyone have any input?
0
Iana Tsolova
Telerik team
answered on 24 Sep 2009, 07:08 AM
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.
Tags
Ajax
Asked by
Duncan Evans
Top achievements
Rank 1
Answers by
Duncan Evans
Top achievements
Rank 1
Iana Tsolova
Telerik team
Share this question
or