Loading Panel Not showing Correctly

[Stuart Hemming]

In our master page we have this ...

public string AjaxLoadingSkin
{
    get
    {
        string s = SkinManager.Skin ?? "Office2007";
        return String.Format("Telerik.Web.UI.Skins.{0}.Ajax.loading.gif", s);
    }
}

And this is in the master page's markup ...

<telerik:RadAjaxLoadingPanel IsSticky="true" ID="LoadingPanel1" runat="Server">
  <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, AjaxLoadingSkin) %>' style="border: 0;"/>
</telerik:RadAjaxLoadingPanel>

And this has worked just fine for a Donkey's age.

We upgraded to Q2 2011 yesterday and registered the new Telerik.Web.UI.Skins DLL and now the loading panel is showing incorrectly.

-- 
Stuart

[Iana Tsolova]

Hi Stuart,

As of Q1 2009 RadAjaxLoadingPanel supports skinning as all other controls in the Telerik RadControls for ASP.NET AJAX suite. Then we put a note in the RadAjaxLoadingPanel demo that the image which were previously used are obsolete and will be removed from the assembly after Q1 2010. 
Find more information below:
http://www.telerik.com/help/aspnet-ajax/ajax-changes-and-backwards-compatibility.html 

Regards,
Iana
the Telerik team

[Stuart Hemming]

So, we don't need to define an image for the loading panel anymore, is that what you're saying?

-- 
Stuart

[Stuart Hemming]

No, I guess it's not, 'cos all I get now is the modal screen

-- 
Stuart

[Iana Tsolova]

Hi Stuart,

Yes, you do not need to put an image inside the RadAjaxLoadingPanel declaration but instead use one of the built-in Skins. Though you still have the ability to do it. Check the below demos:
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx

However note that by default the Skin property is not set to Default as it is for the rest of the RadControls for ASP.NET AJAX. This is done for backward compatibility. So if you do not set the Skin explicitly or do not add an image in the RadAjaxLoadingPanel declaration, you will see nothing.

Hope this helps.

Best wishes,
Iana
the Telerik team

[Stuart Hemming]

For the life of me, I can't get this to work right.

I've got the following markup...

<telerik:RadAjaxLoadingPanel IsSticky="true" ID="LoadingPanel1" runat="Server" Transparency="10" BackgroundPosition="Center">
</telerik:RadAjaxLoadingPanel>

I'm setting the Skin property in code-behind in the OnPreRender event but whilst I get the modal screen, I never see the loading image.

Freaky.

-- 
Stuart

[Iana Tsolova]

Hi Stuart,

What happens if you remove the Transparency and IsSticky settings?

All the best,
Iana
the Telerik team

[Stuart Hemming]

Sorry, somehow missed your question.

If I remove the IsSticky and Transparency settings the loading icon appears in multiple places over the controls being updated.

-- 
Stuart

[Iana Tsolova]

Hi Stuart,

In this case, you will need to set style="position:absolute" for the loading panel and give it dimensions:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" IsSticky="true"
    style="position:absolute;" Height="100px" Width="100px">
</telerik:RadAjaxLoadingPanel>
OR
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" IsSticky="true"
    style="position:absolute; height:100%; width:100%; top:0; left:0;">
</telerik:RadAjaxLoadingPanel>

Hope it works for you.

Kind regards,
Iana
the Telerik team

[Stuart Hemming]

Iana,

We're getting there.

It works now.

But (come on, you were expecting that, weren't you)

The modal screen appears behind the menu (the page has a RadMenu on it).

The default z-index for the menu is 7000. If I set the z-index for the loading panel to be greater than this, the modal screen covers the menu but there is a hole in the middle of it where the loading image should be.

-- 
Stuart

[Stuart Hemming]

Any thoughts?

-- 
Stuart

[Maria Ilieva]

Hello Stuart,

Actually the described beahvior is not expected as the default LoadingPanel z index is actually 90000- rather bigger than the one of the RadMenu.
Could you please test the application with the latest modification but by removing the transparency property of the RadAjaxLoadingPanel.
If this doesn't help please send us sample runnable application which demonstrates the described issue in the support ticket you have opened with us. We will inspect it locally and do our best to provide proper solution.

Regards,
Maria Ilieva
the Telerik team