Center RadAjaxLoadingPanel in UI for ASP.NET AJAX Ajax

Andre

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>

Iana Tsolova

Admin

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

A

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.

Sebastian

Admin

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

Skypy

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.

Patrick Stovall

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.

Konstantin Petkov

Admin

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.

Josh Berkheimer

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?

Pavel

Admin

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.

LoadingPanel.zip

jfkrueger

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?

Pavel

Admin

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.

LoadingPanel.zip

Paweł

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 
        
            { 
        
                background: url(Images/ajax-loader.gif) no-repeat center center; 
        
            }

Very simple and works rof me in FF nad IE.

Dimo

Admin

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

Carl

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.

Pavel

Admin

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.

Carl

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.

Zura Chikhladze

32 posts

Member since:
Jul 2009

Posted 21 Feb 2011 Link to this post

Andre, excellent solution to the problem. thank you.