Loading panel displaying two images

[Amar]

Hi

I recently upgraded to Q1 2009 version and everything seems to be going ok. However, my Loading panel now shows two loading images. I am using a custom image, so it shows that + the default loading image.

	<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
	ClientEvents-OnRequestStart="userEditRequestStart" ClientEvents-OnResponseEnd="userEditRequestEnd"
	Style="overflow: hidden" >
	<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  Width="100%" Height="100%">
	<div class="loaderPanelStyle">
	<asp:Image ID="ajaxLoader" runat="server" SkinID="loaderGif" CssClass="loaderGifStyle" />
	<asp:Label ID="lblloader" runat="server" Text="Loading..." CssClass="loaderTextStyle"></asp:Label>
	</div>
	</telerik:RadAjaxLoadingPanel>
	<div id="formPanel">
	<button>do postback</button>
	</div>
	</telerik:RadAjaxPanel>

As you can see that the loading panel is inside a RadAjaxPanel. The button on line 11 (just there to explain this issue) does a postback. The userEditRequestStart function is called by the ClientEvents-OnRequestStart of the RadAjaxPanel. In this function, i hide the formPanel. At this point the only thing visible is the Loading Panel with my custom image. However it also dispays the default image as well.

Finally, the userEditRequestEnd method is called by ClientEvents-OnResponseEnd event and i show the formPanel.

Also, is there an easy way to show hide updating content while using the loading panel? e.g. tell the ajaxpanel the container id which will be hidden on postback and shown on completion without writing the javascript the way i have been?

[Dimo]

Hello Amar,

Unlike other RadControls, the RadAjaxLoadingPanel has its Skin property set to an empty string (no skin) by default, so that the embedded skin images are not shown for existing websites. I suppose that you have a global skin setting in the web.config, which is picked up by the RadAjaxLoadingPanel as well.

You simply have to set Skin="" explicitly for the RadAjaxLoadingPanel.

More about the RadAjaxLoadingPanel skins can be found at:

http://www.telerik.com/help/aspnet-ajax/skins.html

By the way, the RadAjaxLoadingPanel should not be placed inside an updated control, unless you really want to update it as well (which I doubt).

As for your second question - there is no easy and automatic way to show or hide user-defined content during AJAX requests, so your approach is correct. By default, RadAjaxLoadingPanel hides the entire updated control and positions itself on top of it. If you set Transparency (or Skin) to the loading panel, then it again positions itself on top of the updated control, but does not hide the updated content.

Let us know if you need more information.


Greetings,
Dimo
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.

[Amar]

Hi Dimo

You were correct, the skin was the issue. As i am now controlling the skins using the appSettings, the default skin was being applied to the Loading panel.
In addition to this, what you described is exactly what i want. I just didnt know the loading panel did that. So i have now moved the Loading panel out of the AjaxPanel and removed the javascript functions. So now, Loading panel automatically hides the updating control and shows its self during postback.

Thanks a lot. I am going to close the support ticket as well.