RadControls for ASP.NET AJAX 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.
Position
In order to have a RadAjaxLoadingPanel, 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 RadAjaxLoadingPanel using the design-time. The IsSticky property of the RadAjaxLoadingPanel defines where the panel will appear. By default, when IsSticky is false, the RadAjaxLoadingPanel will appear over the updated control. If you set IsSticky to true, the panel will appear where you have set it in the WebForm.
 Caution |
|---|
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 RadAjaxLoadingPanel control i.e: <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" IsSticky="true" runat="server" style="position:absolute;"> <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="Loading.gif" /> </telerik:RadAjaxLoadingPanel> |
You can modify the RadAjaxLoadingPanel control as you would do with a normal template. The example below shows how to set an Image and a Label inside the RadAjaxLoadingPanel.
CopyASPX
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" 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>
</telerik:RadAjaxLoadingPanel>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 RadAjaxLoadingPanel provides two properties: InitialDelayTime and
MinDisplayTime.
The InitialDelayTime property specifies the delay in milliseconds, after which the RadAjaxLoadingPanel
will be shown. If the request returns before this time, the RadAjaxLoadingPanel 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 RadAjaxLoadingPanel: MinDisplayTime. It specifies the minimum time in milliseconds that
the Loading Panel will last. The control will not be hidden before this period has passed even if the request returns. This will ensure
more smoother interface for your page.
 Note |
|---|
Note that the InitialDelayTime and MinDisplayTime properties can be used only when the loading panel is managed by RadAjaxManager/RadAjaxManagerProxy
and RadAjaxPanel control. They are not valid when the loading panel is shown/hidden manually. In such case you can achieve the same functionality with the
setTimeout() and setInterval() javascript methods. |
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.
Skinning
RadAjaxLoadingPanel supports skinning and you can change its skin by setting the Skin property to the name of the respective skin. The default value of the Skin property is "" (no skin).
If the Skin property is set, transparency is applied by default from the skin. However you can change this behavior by setting EnableSkinTransparency="false".
A BackgroundPosition property enables you to position the loading image in the loading panel (Top, TopRight, TopLeft, CenterLeft, Center, CenterRight, BottomLeft, Bottom, BottomRight, None). The default value is Center.
Find more information about RadAjaxLoadingPanel skins here.
Explicitly show and hide the loading panel
Loading Panel's Show and Hide methods can be explicitly called on the client. This allows you to update controls according to some condition 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