AjaxLoadingPanel - First Look

Demo Configurator

Loading Image Position
Center
Transparency

Isolate this demo as a stand-alone application

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 >

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.

<%@ 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 runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <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="TransparencyPanel"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <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>

        <asp:Panel ID="Panel1" runat="server" Height="380px" CssClass="background1">
            <telerik:RadButton ID="Button2" runat="server" Text="Click to see the loading image" OnClick="Button2_Click"></telerik:RadButton>

        </asp:Panel>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow" Title="Loading Image Position">
                    <qsf:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Size="Medium">
                        <Items>
                            <telerik:DropDownListItem runat="server" Text="Bottom" Value="Bottom" />
                            <telerik:DropDownListItem runat="server" Text="BottomLeft" Value="BottomLeft" />
                            <telerik:DropDownListItem runat="server" Text="BottomRight" Value="BottomRight" />
                            <telerik:DropDownListItem runat="server" Text="Center" Value="Center" Selected="True" />
                            <telerik:DropDownListItem runat="server" Text="Left" Value="Left" />
                            <telerik:DropDownListItem runat="server" Text="None" Value="None" />
                            <telerik:DropDownListItem runat="server" Text="Right" Value="Right" />
                            <telerik:DropDownListItem runat="server" Text="Top" Value="Top" />
                            <telerik:DropDownListItem runat="server" Text="TopLeft" Value="TopLeft" />
                            <telerik:DropDownListItem runat="server" Text="TopRight" Value="TopRight" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Size="Medium" Title="Transparency">

                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Enable Background Transparency" Checked="false"
                        AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox><br />
                    <br />
                    <asp:Panel runat="server" ID="TransparencyPanel">
                        <qsf:NumericTextBox ID="RadNumericTextBox1" runat="server" MinValue="1" MaxValue="100" Value="30" Size="Narrow" WrapperCssClass="transparencyTextBox" Visible="false">
                            <NumberFormat DecimalDigits="0"></NumberFormat>
                        </qsf:NumericTextBox>

                        <qsf:Button ID="Button1" runat="server" Text="Set value" OnClick="Button1_Click" Size="Narrow" Visible="false"></qsf:Button>
                    </asp:Panel>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?