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

Does Not Load the panel in whole page.

5 Answers 188 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
rajkamal Gupta
Top achievements
Rank 1
rajkamal Gupta asked on 30 Dec 2009, 09:26 AM
Hi All,
            I am having problem in the AjaxLoading Panel. I want to display the loading panel in whole page rather then the specific control for that i used RadAjaxPanel l in the master page like this:

<telerik:RadAjaxPanel ID="Loadingpanel1"  runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
           <ClientEvents  OnRequestStart="RequestStart()" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Loadingpanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Loadingpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings> 
        </telerik:RadAjaxManager>

 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  Transparency="30"  IsSticky="true" CssClass="MyModalPanel" Skin="" ScrollBars="None">
                 <asp:Image ID="Image1"  runat="server" AlternateText="Wird geladen" Style="" ImageUrl=  "~/App_Themes/WillisDRITheme/Images/Processing.gif"  CssClass="MyLoadingImage"/>
        </telerik:RadAjaxLoadingPanel>   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
</telerik:RadAjaxPanel>



this will display the Loading panel in the whole page but the image is not display in the center of the page. Like when the page is scrollable i.e. page height is more then the screen height in that case the loading image should be always in the center.But Image appear to the center of the whole page height(screen height).

I use given script to use the loading panel in full page.
function RequestStart() { 
        // the following Javascript code takes care of expanding the RadAjaxLoadingPanel 
        // to the full height of the page, if it is more than the browser window viewport 
 
        var loadingPanel = document.getElementById("<%= RadAjaxLoadingPanel1.ClientID %>"); 
        var pageHeight = document.documentElement.scrollHeight; 
        var viewportHeight = document.documentElement.clientHeight; 
 
        if (pageHeight > viewportHeight) { 
            loadingPanel.style.height = pageHeight + "px"; 
        } 
         
        // the following Javascript code takes care of centering the RadAjaxLoadingPanel 
        // background image, taking into consideration the scroll offset of the page content 
 
        var scrollTopOffset = document.documentElement.scrollTop; 
        var loadingImageHeight = 55
 
        loadingPanel.style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
 
        // workaround for RadAjaxLoadingPanel for ASP.NET - there are two elements with the same ID 
        // this is not needed with RadAjaxLoadingPanel for ASP.NET AJAX 
 
        if (loadingPanel.nextSibling.className == loadingPanel.className) // IE, Opera 
        { 
            loadingPanel.nextSibling.style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
        } 
        else if (document.getElementsByClassName) // Firefox 
        { 
            var panels = document.getElementsByClassName("MyModalPanel"); 
            for (var j = 0; j < panels.length; j++) { 
                panels[j].style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
            } 
        } 
    } 

and use this Style for the Loading Image.
.MyLoadingImage 
    position:relative; 
    top:50%; 
    margin-top:-30px; 
    left:50%; 
    margin-left:-65px; 

Thanks
Wish you new Year!!

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Dec 2009, 09:55 AM
Hello Rajkamal,

Please refer to

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-make-a-radajaxloadingpanel-span-over-the-whole-page.aspx

For other scenarios you can also keep this in mind:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-center-image-in-a-radajaxloadingpanel.aspx

Kind regards,
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
rajkamal Gupta
Top achievements
Rank 1
answered on 31 Dec 2009, 06:20 AM
Hi,
      Thanks for the response, But this has not solve my problem as my problem is that when page height is more then the browser height
then the image appear center of the page and when we scroll down then image should also move so that it always looks in the center of the visible area of the screen.
   Current behavior is that it always remain in the center of the page height.

In the 2nd link project the first page(UsingBackground.aspx) set the image in the center of the browser screen but when the page height is greater then the browser window height and scroll down the image is not visible.
In the 2nd link project the second page(UsingPositioning.aspx) set the image in the center of the page height so if the the page height is greater then the browser window height then image is not visible but when you scoll down then you see the image.

My concern is that the loading image always appear in the center of the visible page in the browser.

Thanks
Wish You Happy New Year(2010)!!
0
rajkamal Gupta
Top achievements
Rank 1
answered on 04 Jan 2010, 08:46 AM
Hi,
     Can any one tell me ,Is response.Redirect() not supported by the Ajax Loading Panel.I am using Response.Redirect() from a Grid template Column,which contain a asp Link Button but my page is not Firing the OnRequestStart ClientEvents of RadAjaxManager.
is this for the reason that Response.Redirect() is not a Ajax Request.
Can any one tell me, How to overcome this problem. I am using the asp.net 3.5 and there compatible terik control library.
0
Dimo
Telerik team
answered on 04 Jan 2010, 01:04 PM
Hi Rajkamal,

Moving the animated image during AJAX requests is not supported out-of-the-box. You can implement such a behavior yourself by subscribing to the page scroll event and recalculating the animated image's position, as already demonstrated in the provided examples.

As for your second question, please refer to:

http://www.telerik.com/help/aspnet-ajax/ajxredirectingtoanotherpage.html

Regards,
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:52 AM
Hi Dimo,

My problem is when page height is longer then the browser height, the loading panel Transparency is only for browser height.


Thanks and Regards,
Tags
Ajax
Asked by
rajkamal Gupta
Top achievements
Rank 1
Answers by
Dimo
Telerik team
rajkamal Gupta
Top achievements
Rank 1
Kyaw
Top achievements
Rank 1
Share this question
or