AJAX

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

AjaxLoadingPanel - First Look

Configurator


Change Background Position:
BackgroundTransparency:
select


RadAjaxLoadingPanel supports skinning and you can change its skin by setting the Skin property to the name of the respective skin. A BackgroundPosition property enables you to position the loading image in the loading panel. The EnableSkinTransparency property allows you to enable/disable default skin transparency.

You could also check the new BackgroundTransparency property of the RadAjaxLoadingPanel by disabling the SkinTransparency checkbox.

A RadAjaxLoadingPanel shows a loading image as a progress indication when an AJAX request is performed, i.e., when the page is loading silently. This improves the look and feel of the page so there are no sudden changes and unnecessary flickering.

You can set your own picture as a loading image by supplying the path to your own image in the loading panel definition:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/loading1.gif"></asp:Image>
</telerik:RadAjaxLoadingPanel>
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AJAXExamplesCSharp.AJAX.Examples.Common.LoadingImages.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>Demo of AJAX loading panel l Telerik RadAjaxLoadingPanel samples</title>
    <style type="text/css">
        .module1
        {
            background-color: #dff3ff;
            border: 1px solid #c6e1f2;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="CheckBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="DropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
        Expanded="true">
        <table>
            <tr>
                <td style="width: 200px">
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="EnableSkinTransparency" Checked="true"
                        AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox><br />
                    <br />
                </td>
                <td>
                    Change Background Position:<br />
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                        <asp:ListItem>Bottom</asp:ListItem>
                        <asp:ListItem>BottomLeft</asp:ListItem>
                        <asp:ListItem>BottomRight</asp:ListItem>
                        <asp:ListItem Selected="True">Center</asp:ListItem>
                        <asp:ListItem>Left</asp:ListItem>
                        <asp:ListItem>None</asp:ListItem>
                        <asp:ListItem>Right</asp:ListItem>
                        <asp:ListItem>Top</asp:ListItem>
                        <asp:ListItem>TopLeft</asp:ListItem>
                        <asp:ListItem>TopRight</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    BackgroundTransparency:
                    <telerik:RadComboBox runat="server" ID="RadComboBox1" AutoPostBack="true" Text="SetBackgroundTransperancy"
                        OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="0" Value="0" />
                            <telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
                            <telerik:RadComboBoxItem runat="server" Text="30" Value="30" />
                            <telerik:RadComboBoxItem runat="server" Text="50" Value="50" />
                            <telerik:RadComboBoxItem runat="server" Text="100" Value="100" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
        </table>
    </qsf:ConfiguratorPanel>
    <br />
    <br />
    <fieldset class="module1">
        <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" Height="275px" Style="padding-top: 15px;
            padding-left: 15px">
            <asp:Button ID="Button1" runat="server" Text="Click to see the loading image" OnClick="Button1_Click">
            </asp:Button>
        </asp:Panel>
    </fieldset>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>