Center RadAjaxLoadingPanel

17 posts, 0 answers
  1. Andre
    Andre avatar
    1 posts
    Member since:
    Jun 2012

    Posted 04 Feb 2008 Link to this post

    I had some problems to center the loading image for a loading panel both vertically and horizontally.

    This worked for me. I basically just wrap the image inside a table that occupies 100% width and height and then I align the content of the cell to the middle.

    Hope this can be of any help to others.

    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Transparency="20" BackColor="#E0E0E0">
                <table style="width:100%;height:100%;">
                    <tr style="height:100%"><td align="center" valign="middle" style="width:100%">
                        <asp:Image ID="Image1" runat="server" AlternateText="Loading..."
            BorderWidth="0px" ImageUrl="~/Images/Loading/Loading6.gif">
           </asp:Image>
                    </td></tr>
                </table>
      </telerik:RadAjaxLoadingPanel>
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 05 Feb 2008 Link to this post

    Hello Andre,

    Thank you for sharing your solution in our forum. I have updated your Telerik points for the involvement.

    Greetings,
    Iana
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. A
    A avatar
    20 posts
    Member since:
    Mar 2008

    Posted 31 Mar 2008 Link to this post

    Hi, Does the loading panel control reside inside the RADAJAXPanel control in the ASPX page? I have it after the RADAJAXPanel and it appears as it is supposed to however it is at the very top (centered horizontally) of the form.
  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Apr 2008 Link to this post

    Hi A,

    The loading panel should reside outside of any RadAjaxPanel as it is not intended to be updated on ajax request. How to change the position of the loading image you can learn from the following topic in the online help.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Skypy
    Skypy avatar
    31 posts
    Member since:
    Nov 2007

    Posted 02 Apr 2008 Link to this post

    Here is my version with a little update :
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="20">
        <table style="width:100%; height:100%; background-color: white;">
            <tr style="height:100%">
                <td align="center" valign="middle" style="width:100%">
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                    style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />
                </td>
            </tr>
        </table>
    </telerik:RadAjaxLoadingPanel>

    I prefer mine but it is a personal opinion, I hope it can help.
  6. Patrick Stovall
    Patrick Stovall avatar
    22 posts
    Member since:
    Jan 2008

    Posted 23 Jul 2008 Link to this post


    Is it possible to center the loading panel based on the viewable area of the content area instead of the entire content area?  I have quite a few screens in which the content area height is quite large.  So with what is currently coded in this thread is used, the loading panel could not be seen.
  7. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 24 Jul 2008 Link to this post

    Hello Patrick,

    You can customize the Loading element position through some JavaScript. See the help article here for a possible implementation you can use as starting point.

    Regards,
    Konstantin Petkov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Josh Berkheimer
    Josh Berkheimer avatar
    67 posts
    Member since:
    Sep 2006

    Posted 01 Oct 2008 Link to this post

    Your suggestion for centering this in the viewable area does not work in Safari nor Chrome browsers.  Is there a fix for the bugs with these specific browsers?
  9. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 03 Oct 2008 Link to this post

    Hello Josh,

    I was not able to reproduce the problem neither on Safari nor on Chrome. Please find attached the page I used for testing and let us know how it behaves on your end.

    All the best,
    Pavel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 17 Nov 2008 Link to this post

    Well, the Script works pretty well to center the RadAjaxLoadingPanel but the behavior is still different. On some pages I can simply wrap my content in a RadAjaxPanel and set the LoadingPanelID like this:

    <telerik:RadAjaxPanel ID="rapMain" runat="server" LoadingPanelID="rlpMain">  
           
         <div class="divColSmaller">  
              *First Name-MI-*Last Name:  
         </div> 
     
    </telerik:RadAjaxPanel> 
     
    And then declare a simple RadAjaxLoadingPanel like this:

    <telerik:RadAjaxLoadingPanel ID="rlpMain" runat="server" HorizontalAlign="Center" IsSticky="true">  
        <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" style="border:0;" /> 
    </telerik:RadAjaxLoadingPanel> 
     
     

    And it works very well, meaning the content of the page is completely replaced by the RadAjaxLoadingPanel and it is centered, and then when the processing is complete the panel goes away and the page content is visible again.

    With all of these solutions, I am able to get the LoadingPanel centered but it is now no longer replacing all of the content on the page, it is just pushing it all down so if you are working on the bottom of a page you never see the loading panel.

    How do I get the loading panel to actually replace all of the content on the page like it does when I use the above code?
  11. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 20 Nov 2008 Link to this post

    Hi Joe,

    I have updated the sample to illustrate that the script is working as expected with a LoadingPanel defined similar to yours. Also as explained in this help article when the IsSticky property is set to true, you need to set absolute positioning for the LoadingPanel control. This will prevent the pushing of the other controls when the LoadingPanel appears.

    I hope this helps

    Regards,
    Pavel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Paweł
    Paweł avatar
    16 posts
    Member since:
    Jan 2009

    Posted 26 Jan 2009 Link to this post

    There is much simpler way to center loading images. Using tables is not nice also.

    Just put empty RadAjaxLoadingPanel with CssClass like this:

    <telerik:RadAjaxLoadingPanel ID="ajaxLoading" runat="server"
    Transparency
    ="30" BackColor="#ffffff" CssClass="ajax_loader"
    </telerik:RadAjaxLoadingPanel> 


    And because loading panel is just regular div, so set css for it:

    div.ajax_loader 
        backgroundurl(Images/ajax-loader.gif) no-repeat center center


    Very simple and works rof me in FF nad IE.
  13. Dimo
    Admin
    Dimo avatar
    8385 posts

    Posted 27 Jan 2009 Link to this post

    Hello Paweł,

    That's right. We have even a code library example for that:

    How to Center Image In a RadAjaxLoadingPanel

    Kind regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  14. Carl
    Carl avatar
    11 posts
    Member since:
    Nov 2008

    Posted 25 Jun 2009 Link to this post

    I have a very long grid on a single page so that a user can select all records at one time.

    I have tried the css solutoin above, but it puts the image in the middle of the grid which is typically off the page (either above or below)

    Is there a way to place a loading image in the center of the current viewable screen? 

    Thanks.
  15. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 01 Jul 2009 Link to this post

    Hello Carl,

    I think the javascript method to center the LoadingPanel displayed previously in this thread should work in your case. Try it out and let us know if you have any problems.

    Sincerely yours,
    Pavel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  16. Carl
    Carl avatar
    11 posts
    Member since:
    Nov 2008

    Posted 01 Jul 2009 Link to this post

    Thank you Pavel.  I will give this a try and post my results.

    Thanks.
  17. Zura Chikhladze
    Zura Chikhladze avatar
    32 posts
    Member since:
    Jul 2009

    Posted 21 Feb 2011 Link to this post

    Andre, excellent solution to the problem. thank you.
Back to Top