Telerik RadAjax has a support for templates that will be shown as a progress indication when a callback request is performed, i.e. when the page is loading silently. This will improve the overall feeling of the page as there will be no sudden changes and unnecessary flickering. There are some sample loading panels below:
Position
In order to have a LoadingPanel, you need to drag it to your web form from the toolbox just like any control. Then you can set a control to use a LoadingPanel using the design-time. The IsSticky property of the LoadingPanel defines where the panel will appear. By default, when IsSticky is false, the LoadingPanel will appear over the updated control. If you set IsSticky to true, the panel will appear where you have set it in the WebForm.
 |
In case you have many controls added to the AjaxSettings and want to use IsSticky="true", then you need to set absolute positioning for the LoadingPanel control i.e:
<rad:AjaxLoadingPanel ID="AjaxLoadingPanel1" IsSticky="true" runat="server" Height="75px" Width="75px" style="position:absolute;">
<asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" />
</rad:AjaxLoadingPanel> |
You can use a single LoadingPanel for many controls. It will show on the place of each control that was set to use it, IsSticky was set to true.
You can modify the LoadingPanel control as you would do with a normal template. The example below shows how to set an Image and a Label inside the LoadingPanel.
| ASPX |
 Copy Code |
|
<rad:AjaxLoadingPanel
id="AjaxLoadingPanel1"
runat="server"
Width="256px"
Height="64px">
<asp:Label id="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
<asp:Image id="Image1" runat="server" Width="224px" Height="48px" ImageUrl="Loading.gif"></asp:Image>
</rad:AjaxLoadingPanel> |
Timing
There are cases when you update a small amount of data. In this scenario the AJAX request executes very fast and there is not enough time to show the Loading Panel. You see a brief flickering instead, which may seem annoying and may confuse the site visitor. For this purpose LoadingPanel provides two properties: InitialDelayTime and MinDisplayTime.
The InitialDelayTime property specifies the delay in milliseconds, after which the LoadingPanel will be shown. If the request returns before this time, the LoadingPanel will not be shown.
This, however does not solve the scenario, when the request returns shortly after the initial delay time has passed. The page has just shown the Loading Panel and has to hide it again. The result will be even more annoying flicker. That's why there is another property for the LoadingPanel: MinDisplayTime. It specifies the minimum time in milliseconds that the Loading Panel will last. The control will not be shown before this period has passed even if the request returns. This will ensure more smoother interface for your page.
Transparency
The loading panel does not "replace" the updated control by default. Instead, it is shown "over" the control. The Transparency property value should be set in percentage (values 0-100). The default value of the Transparency property is 0, which means the loading panel is absolutely visible.
See the online demo and check how changing the transparency value changes loading panel appearance.
Explicitly show and hide the loading panel
Since Telerik RadAjax v1.6.2 AJAX Loading Panel's Show and Hide methods can be explicitly called on the client. This allows you to update controls according to some condition (using the ResolveUpdatedControls event) and display a loading panel over the control that will be updated (Show the panel in OnRequestStart, hide it in OnResponseEnd). Review this topic for more info.
See Also