Does Not Load the panel in whole page.

6 posts, 0 answers
  1. rajkamal Gupta
    rajkamal Gupta avatar
    3 posts
    Member since:
    Dec 2009

    Posted 30 Dec 2009 Link to this post

    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!!
  2. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 30 Dec 2009 Link to this post

    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.
  3. rajkamal Gupta
    rajkamal Gupta avatar
    3 posts
    Member since:
    Dec 2009

    Posted 31 Dec 2009 Link to this post

    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)!!
  4. rajkamal Gupta
    rajkamal Gupta avatar
    3 posts
    Member since:
    Dec 2009

    Posted 04 Jan 2010 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 04 Jan 2010 Link to this post

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

    Posted 18 Jun 2012 Link to this post

    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,
Back to Top