RadControls for ASP.NET AJAX
As of Q1 2009 RadAjaxLoadingPanel supports skinning as all other controls in the Telerik RadControls for ASP.NET AJAX suite. You can change the skin by setting the Skin property to the name of the respective skin.
 Caution |
|---|
Unlike all other RadControls, the RadAjaxLoadingPanelSkin property's default value is "" (no skin). The main reason for that is backwards compatibility. Otherwise the appearance of all legacy loading panels will be spoiled and two loading images will appear.
Note that this will change in the future releases! |
Built-in skins
These are the skins provided by Telerik. They are embedded in the Telerik.Web.UI.dll assembly as web resources. To use a built-in
skin the user only needs to set the Skin property of the control. Built-in skins are also available in
"C:\Program Files\Telerik\RadControls for ASP.NET AJAX QX 20XX\Skins". The complete list of embedded skins and how they look
like for the RadAjaxLoadingPanel control is available below:
 Note |
|---|
With Q2 2011 release of RadControls for ASP.NET AJAX RadAjax has four new skins (Transparent + Office2010 variations). To use them you should add the Telerik.Web.UI.Skins
assembly to your Bin folder. For more information, refer to this blog post.
Since Q3 2011 all the built-in skins (except the Default one) have been relocated to the Telerik.Web.UI.Skins.dll assembly.
Also new Metro skin has been added for RadAjax.
|
If the Skin property is set, the loading panel will NOT hide the updated control entirely, because transparency is applied by default from the skin. You can change this behavior by setting EnableSkinTransparency="false". Setting the control's Transparency property will increase the actual visible transparency if the skin transparency is not disabled.
When the Skin property is set, RadAjaxLoadingPanel control will render two nested <div>s instead of one. This allows the usage of a non-transparent loading image and a transparent background - in other words, the new rendering will remove one of the biggest limitations of the control's appearance so far.
A BackgroundPosition property enables the developer to position the loading image in the loading panel (Top, TopRight, TopLeft, CenterLeft, Center, CenterRight, BottomLeft, Bottom, BottomRight). The default value is Center. A None option is also available - this is useful in cases when the loading image is larger than the updated control (e.g. a textbox).
Custom skins
Apart from using the embedded skins, one can easily create a custom skin for the RadAjaxLoadingPanel. Here is a code library example, which demonstrates how to do that and provides some useful tips.