RadAjaxLoadingPanel is not appearing at the center of the page.

[kalyan gupta]

Hi @

I am using Telerik:RadAjaxLoadingPanel to display the loading image on the screen when ever there is an ajaxify postback.

Following is the code:

<

 

telerik:RadAjaxLoadingPanel ID="radLoadingPnl" runat="server" AnimationDuration="300"

 

 

Style="vertical-align: middle;" HorizontalAlign="Center" EnableSkinTransparency="true"

 

 

BackgroundPosition="Center">

 

 

<img alt="Loading..." src="Images/loading.gif" style="border: 0px; vertical-align: middle;"

 

 

align="middle" />

 

 

</telerik:RadAjaxLoadingPanel>

 

//For displaying loading screen.

 

var loadingPanel = "";

 

 

 

var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();

 

 

 

var postBackElement = "";

 

 

pageRequestManager.add_initializeRequest(initializeRequest);

 

pageRequestManager.add_endRequest(endRequest);

 

 

function initializeRequest(sender, eventArgs) {

 

 

loadingPanel = $find(

'<% = radLoadingPnl.ClientID %>');

 

 

postBackElement = eventArgs.get_postBackElement().id;

 

loadingPanel.show(postBackElement);

 

}

 

 

function endRequest(sender, eventArgs) {

 

 

loadingPanel = $find(

'<% = radLoadingPnl.ClientID %>');

 

 

loadingPanel.hide(postBackElement);

 

}

But My Loading Image always appear next to the control because of which Ajax postback occured instead of Center of the screen.

Is there any property by which I can display the Loading image in the center of the screen for all the resolutions and for all the Ajax postbacks.

Please suggest.

[Pavlina]

Hi Kalyan,

The help article below demonstrates how to center the loading panel on the screen.
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

Give it a try and let me know how it goes.

Best wishes,
Pavlina
the Telerik team

[kalyan gupta]

I have solved this with the following code

<script type="text/javascript">
            function centerLoadingPanel() {
                centerElementOnScreen($get("<%= radLoadingPnl.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;
                    if (!$telerik.isSafari) {
                        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>

[Pavlina]

Hi Kalyan,

I am glad you managed to display the LoadingPanel in the center of the screen. However, please do not hesitate to contact us if other questions or problems arise.

Best wishes,
Pavlina
the Telerik team