This is a migrated thread and some comments may be shown as answers.

RadAjaxLoadingPanel over control

8 Answers 183 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 07 Apr 2009, 12:57 PM
Hi,

If I have a table on screen that I'd like the Loading Panel to appear over when an AJAX call is made, is there any easy way of linking the table's ID to the loading panel with a view that the loading panel set's it's dimensions (top,left, width and height) to those of the table (or div or fieldset etc)?

I'm pretty certain that I can reuse the code from the "Show the loading panel next to AJAX initiator" help screen to do this however it would be nice if there was a built in way of doing it!

Regards,

Jon

8 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 07 Apr 2009, 02:07 PM
Hello Jon,

Please review this help topic on how you could show/hide RadAjaxLoadingPanel explicitly and try it in your case.

Let me know if you find any difficulties or any issues arise.

Sincerely yours,
Iana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Jon
Top achievements
Rank 1
answered on 07 Apr 2009, 06:56 PM
Hi Iana,

Thanks - you'd found the same page I already had for this ;)

I figured out that I'd not set IsSticky so it now works although it's a pain because of the way the browsers handle element positioning. 

I now have another problem with the loading panel that maybe related.  I seem to be getting a loading animated image appearing in the centre of the panel even if the content is empty...  The code below does it in my page...  Anything obvious wrong with it?

Many thanks,

Jon

 

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server"

 

 

DefaultLoadingPanelID="uxLoadingPanel">

 

 

<ClientEvents OnRequestStart="SetLoadingPanelPosition" />

 

 

<AjaxSettings>

 

 

<telerik:AjaxSetting AjaxControlID="uxLogonButton">

 

 

<UpdatedControls>

 

 

<telerik:AjaxUpdatedControl ControlID="uxErrorMessage" />

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

</AjaxSettings>

 

 

</telerik:RadAjaxManager>

 

 

<telerik:RadAjaxLoadingPanel ID="uxLoadingPanel" Runat="server"

 

 

MinDisplayTime="5000" IsSticky="True" HorizontalAlign="Center">

 

 

Loading...

 

 

</telerik:RadAjaxLoadingPanel>

 

0
Accepted
Iana Tsolova
Telerik team
answered on 08 Apr 2009, 08:46 AM
Hello Jon,

It seems I sent you the wrong topic, please excuse me for that.
Here is the one I intended to show you:
http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html

Additionally, I prepared a sample web page to illustrate how you could achieve the desired functionality.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Jon
Top achievements
Rank 1
answered on 08 Apr 2009, 10:33 AM
Hi Iana,

No problem ;)

You example was much better than the one on the page so thanks for providing that!

That works so much better than my way of doing it as I had some really big fudges in there to get it positioned properly.

I'm finding that I get three problems still.  Firstly the loadingpanel is not picking up the page skin (set using the Theme = "Black" method) so I have to manually set the controls skin in the page init. 

<

 

telerik:RadAjaxLoadingPanel ID="uxLoadingPanel" Runat="server" MinDisplayTime="5000" ></telerik:RadAjaxLoadingPanel>

 


Secondly if I added the standard image to the loading content I end up with two gifs showing - the gif as per the above code as well as the gif from the inserted code (as below).

<

 

telerik:RadAjaxLoadingPanel ID="uxLoadingPanel" Runat="server" MinDisplayTime="5000" >

 

 

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Black.Ajax.loading.gif") %>' style="border: 0px;" />

 

 

</telerik:RadAjaxLoadingPanel>

 


Finally, I can't seem to find any VerticalAlign property on the loading panel.  As such how do I align a custom image vertically on the panel? 

For the time being I can get around the issues but long term I will need to use a custom animated loading gif and not have the other one showing through.  Any ideas?

Many thanks,

Jon


0
Accepted
Iana Tsolova
Telerik team
answered on 08 Apr 2009, 11:48 AM
Hello Jon,

I am happy to hear the sent sample was useful for you.

Regarding the described issues:

  • I am not sure why the LoadingPanel control Skin was not set to from the page Theme, I will have to perform additional testing on that so I could give a proper answer.
  • If the Skin property is set to the LoadingPanel control and a custom image is added as well, it is expected that you end up with two gifs. You need to use either the Skin property or adding an image.
  • In order to change the Skin loading image position, you could set the BackgroundPosition property of the RadAjaxLoadingPanel control. And to set position to the custom loading image, you need to set/calculate its top and left position in the OnRequestStart client-side event handler. For instance as below:
telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">         
<script type="text/javascript">       
      
function RequestStart(sender, args)     
{     
    var loadingPanel = $get("<%= RadAjaxLoadingPanel1.ClientID %>");     
    var table = document.getElementById("table1");    
        
    var loadingImageWidth = 75;     
    var loadingImageHeight = 75;     
     
    loadingPanel.style.backgroundPosition = (parseInt(table.clientWidth / 2)   
         - (loadingImageWidth / 2)) + "px "   
         + (parseInt(table.clientHeight / 2)   
         - parseInt(loadingImageHeight / 2))+ "px";     
}         
         
</script>         
</telerik:RadCodeBlock>   

I hope this helps you.

All the best,
Iana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Jon
Top achievements
Rank 1
answered on 08 Apr 2009, 02:27 PM
Hi Iana,

Hold on - don't do any testing, it's the skin file.  The control wasn't in there.... I'd better look for any other missing controls ;)

I see what you mean re the embedded skins - I set the EnableEmbeddedSkins="False" flag and the 2nd image disappeared. It's odd as in my test page I never needed to set that flag.  Anyway it works now so I'm not worried.

Thanks for the code for the image centralisation, is there any chance that could be added in as a new setting in the future - VerticalAlign?

Thanks for the help on all this.  I'll mark the relevant posts as having answered my questions.

Regards,

Jon
0
Iana Tsolova
Telerik team
answered on 10 Apr 2009, 09:49 AM
Hi Jon,

Yes, I will suggest our developers implementing the VerticalAlign property so they could consider adding it to later versions of the control.

If further issues arise, do not hesitate to write us back.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Jon
Top achievements
Rank 1
answered on 14 Apr 2009, 09:36 AM
Sounds great - thanks Iana.

Regards,

Jon
Tags
Ajax
Asked by
Jon
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Jon
Top achievements
Rank 1
Share this question
or