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

RadAjaxLoadingPanel with Image/Text does not display in the center screen

4 Answers 317 Views

Ajax

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

Phuc asked on 22 Aug 2011, 04:20 AM

Hi all,

I have a RadAjaxLoadingPanel in MasterPage as below :

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true" Skin="Default" CssClass="modalBackground">

<div class="updateProgress">

<asp:Image ID="imgLoading" runat="server" ImageUrl="~/Styles/Images/ajax-loader2.gif" />

<span class="updateProgressMessage">Loading...</span>

</div>

</telerik:RadAjaxLoadingPanel>

And here is its CSS :

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=60);

opacity: 0.60;

}

.updateProgress

{

border-width: 1px;

border-style: solid;

background-color: #FFFFFF;

position: absolute;

width: 250px;

height: 50px;

}

In Content Page :

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

..............

</telerik:RadAjaxManager>

The sample link is http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html.
In this link RadAjaxManager is on MasterPage but in my Web app each page has its own RadAjaxManager.

How can I set this LoadingPanel in the center screen for all pages ?

Regards,
Phuc

4 Answers, 1 is accepted

Accepted

answered on 22 Aug 2011, 01:04 PM

Hi Phuc,

To achieve the desired functionality you can try to add a RadAjaxManager control to the master page and set its DefaultLoadingPanelID to the ID of the RadAjaxLoadingPanel situated on the master page. Then you need to handle the manager OnRequestStart client-side vent and call there the centerElementOnScreen() method. In the content pages you can use RadAjaxManagerProxy to set up the desired ajax settings.

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

All the best,
Pavlina
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 23 Aug 2011, 05:40 AM

Hi Pavlina,

It's useless to me. The LoadingPanel still be in the left, top of the screen. This is my code :

<script type="text/javascript">

function centerLoadingPanel() {

var loadingPanelElement = document.getElementById("<%=RadAjaxLoadingPanel1.ClientID%>");

centerElementOnScreen(loadingPanelElement);

}

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;

var left = scrollLeft + leftOffset;

element.style.top = top + "px";

element.style.left = left + "px";

}

</script>