Window - Page Loading Animation

ShowContentDuringLoading="false"

ShowContentDuringLoading="true"

Demo Configurator

Choose siteBing
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
The RadWindow'sShowContentDuringLoad property controls whether RadWindow will show the page while it is loaded or will wait until the page is completely loaded (e.g. window.onload is fired in the content page). If ShowContentDuringLoad is set to false, RadWindow will display a loading image that can be controlled with CSS.

Note:
If you intend to show a PDF file in RadWindow instead of a standard page, make sure that ShowContentDuringLoad is set to true. Otherwise if the loaded content is not a page, window.onload will not be fired and RadWindow will not show the content.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        $contentWindowDemo.win1 = "<%=RadWindow1.ClientID %>";
        $contentWindowDemo.win2 = "<%=RadWindow2.ClientID %>";
        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div id="invisible-loading-container" class="demo-container size-thin">
            <h2>ShowContentDuringLoading="false"</h2>
            <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow2" runat="server" Height="300px" Width="300px" NavigateUrl="http://www.bing.com" VisibleOnPageLoad="true" ShowContentDuringLoad="false" OffsetElementID="invisible-loading-container" Left="30" Top="60" />
        </div>
        <div id="visible-loading-container" class="demo-container size-thin">
            <h2>ShowContentDuringLoading="true"</h2>
            <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Height="300px" Width="300px" NavigateUrl="http://www.bing.com" VisibleOnPageLoad="true" ShowContentDuringLoad="true" EnableShadow="true" OffsetElementID="visible-loading-container" Left="30" Top="60" />
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:DropDownList ID="RadComboBox1" Label="Choose site" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
                    <Items>
                        <telerik:DropDownListItem Text="Bing" Value="http://www.bing.com" />
                        <telerik:DropDownListItem Text="KendoUI" Value="http://www.kendoui.com" />
                        <telerik:DropDownListItem Text="W3C" Value="http://www.w3.org/" />
                    </Items>
                </qsf:DropDownList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?