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
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.
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>
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.
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
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.
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
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.
Regards,
Jon