WebForms AjaxLoadingPanel Overview

This help article describes what a RadAjaxLoadingPanel is, describes how to place it on a web form, and how to set properties such as timing, transparency, and skinning. The RadAjaxLoadingPanel control displays a loading icon that indicates a control is being updated.

RadAjax supports templates that will be shown as a progress indicator when a callback request is performed, i.e. when the page is loading silently. Displaying a progress indicator graphic by using RadAjaxLoadingPanel will improve the overall feeling of the page for the user, as there will be no sudden changes and unnecessary flickering.

Telerik UI for ASP.NET AJAX Ninja image

The AjaxLoadingPanel is part of Telerik UI for ASP.NET AJAX, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Position

With your web form in design view you need to drag a RadAjaxLoadingPanel from the toolbox to the web form just like any control. While you are still in design view, you can set other controls on the web form to use the RadAjaxLoadingPanel. 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 on the web form.

If 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 using markup like this: <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 to show your own contents as you would do with a normal template. You need to simply add the content between the opening and closing tag of the RadAjaxLoadingPanel. Example 1 shows how to set an Image and a Label inside the RadAjaxLoadingPanel.

Example 1 : Setting a Label and an Image inside a RadAjaxLoadingPanel .

<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

Many times an AJAX request executes very fast and there is not enough time to show the loading panel. Users may see a brief flickering as the controls update, which may seem annoying and may confuse user. For these scenarios RadAjaxLoadingPanel provides two properties: InitialDelayTime and MinDisplayTime .

The InitialDelayTime property specifies the delay in milliseconds, after which the RadAjaxLoadingPanel will be shown. If the AJAX request returns before this time, the RadAjaxLoadingPanel will not be shown.

Using InitialDelayTime , however does not solve the scenario, of when the AJAX request returns shortly after the initial delay time has passed. If a page has to show the loading panel and then almost immediately has to hide it again, the result is annoying flicker. For these cases the RadAjaxLoadingPanel also has a MinDisplayTime property. It specifies the minimum time, in milliseconds, that the loading panel will display on the screen. The loading indicator will not be hidden before this period has passed, even if the request returns. This will ensure a smoother interface for your page.

The InitialDelayTime and MinDisplayTime properties can be used only when the loading panel is managed by RadAjaxManager / RadAjaxManagerProxy or RadAjaxPanel control. They are not valid when the loading panel is shown or hidden manually. In such cases you can achieve the same functionality with the setTimeout() and setInterval() JavaScript methods.

Transparency

The loading panel does not "replace" the control that is being updated by the AJAX request by default. Instead, it is shown "over" the control. The RadAjaxLoadingPanel has a Transparency property value that 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 RadAjaxLoadingPanel online demo and try modifying the transparency value to see how the appearance of the loading panel changes.

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.

You can find more information about RadAjaxLoadingPanel skins here.

Explicitly Show and Hide the Loading Panel

You can explicitly call the loading panel's Show and Hide methods 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 (Use the OnRequestStart client-side event handler to show the panel, hide the panel using the OnResponseEnd client-side event handler). You can review this topic for more info.

RadAjaxLoadingPanel exposes Modal property, which provides the functionality to force the panel to span over the entire visible area of the page, thus preventing users from clicking on other elements on the page that might trigger PostBacks or AJAX requests.

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" Modal="true">

You can also set the Modal property on client-side using the set_modal() method or simply check whether it is enabled using the get_modal() method.

function pageLoad(app, args) {
        var loadingPanel = $find('<%= RadAjaxLoadingPanel1.ClientID %>');
        loadingPanel.set_modal(true);
}

See Also

In this article