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

5 posts, 1 answers
  1. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 21 Aug 2011 Link to this post

    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


  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 22 Aug 2011 Link to this post

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

  3. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 23 Aug 2011 Link to this post

    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
  4. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 23 Aug 2011 Link to this post

    Hi Pavlina, 

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

    Regards,
    Phuc
  5. Aaron Jessen
    Aaron Jessen avatar
    14 posts
    Member since:
    Feb 2009

    Posted 11 Apr 2012 Link to this post

    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".
Back to Top