Does Not Load the panel in whole page.

[rajkamal Gupta]

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!!

[Dimo]

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.

[rajkamal Gupta]

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)!!

[rajkamal Gupta]

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.

[Dimo]

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.

[Kyaw]

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,