New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Templates and Transparency

  • Demo Configurator
Loading Image
Transparency (%)
Spin UpSpin Down

This example illustrates how you can define different templates for the RadAjaxLoadingPanel control to display custom images during an AJAX request.

It also demonstrates the transparency feature of RadAjaxLoadingPanel, which allows your application to show the loading panel without hiding the updated control.

A "replacing" effect could still be achieved in cases that have no transparency (value 0); the updated control will be "replaced" by the loading panel during the AJAX update.

The transparency of the loading panel is set in percentage. The default value is 0 – the loading panel is not transparent and covers the updated control. Changing the transparency value to 100 will make the loading panel fully transparent.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AJAXExamplesCSharp.AJAX.Examples.LoadingPanel.Transparency.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<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:RadCodeBlock ID="RadCodeBlock2" runat="server">
            <script type="text/javascript" src="scripts.js"></script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" RequestQueueSize="5" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnRequestStart="requestStart"></ClientEvents>
        </telerik:RadAjaxManager>

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

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30" MinDisplayTime="300">
            <div class="loading">
                <asp:Image ID="Image1" runat="server" ImageUrl="images/loading1.gif" AlternateText="loading"></asp:Image>
            </div>
        </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">
                    <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" CssClass="imagesList">
                        <asp:ListItem Value="loading1.gif" Selected="True" Text="&nbsp;<img src='images/loading1.gif' alt='loading'/>"></asp:ListItem>
                        <asp:ListItem Value="loading2.gif" Text="&nbsp;<img src='images/loading2.gif' alt='loading'/>"></asp:ListItem>
                        <asp:ListItem Value="loading3.gif" Text="&nbsp;<img src='images/loading3.gif' alt='loading'/>"></asp:ListItem>
                        <asp:ListItem Value="loading4.gif" Text="&nbsp;<img src='images/loading4.gif' alt='loading'/>"></asp:ListItem>
                        <asp:ListItem Value="loading5.gif" Text="&nbsp;<img src='images/loading5.gif' alt='loading'/>"></asp:ListItem>
                        <asp:ListItem Value="loading6.gif" Text="&nbsp;<img src='images/loading6.gif' alt='loading'/>"></asp:ListItem>
                        <asp:ListItem Value="loading7.gif" Text="&nbsp;<img src='images/loading7.gif' alt='loading'/>"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Transparency (%)">
                    <qsf:NumericTextBox ID="RadNumericTextBox1" runat="server" MinValue="0" MaxValue="100" Width="88px" Value="30" WrapperCssClass="transparencyTextBox">
                        <NumberFormat DecimalDigits="0"></NumberFormat>
                    </qsf:NumericTextBox>

                    <qsf:Button ID="Button1" runat="server" Text="Set value" OnClick="Button1_Click" Width="88px"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>

    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance