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

[Phuc]

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

[Pavlina]

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

[Phuc]

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>

     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <ClientEvents OnRequestStart="centerLoadingPanel"></ClientEvents>
    </telerik:RadAjaxManager>
    <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>

Could you show me where I am wrong?

Regards,
Phuc

[Phuc]

Hi Pavlina, 

It's done now.
Thanks a lot for your help.

Regards,
Phuc

[Aaron Jessen]

I'm having the same problem but the example didn't work. Gee, Phuc, thanks so much for showing us how "it's done now".