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

Show Content During Load

ShowContentDuringLoad="false"

ShowContentDuringLoad="true" (default)

The RadPane'sShowContentDuringLoad property works along with the ContentUrl one and it controls whether RadPane will show the page while it is being 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, RadPane will display a loading image that can be controlled with CSS.

The RadPane has built-in ability to show a loading sign while a content page set through the ContentUrl property is being loaded in it. To turn on this functionality you should set ShowContentDuringLoad to false (the default value is true).

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Splitter.ShowContentDuringLoad.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        //<![CDATA[
        $splitterShowContentDemo.pane2ID = "<%= RadPane2.ClientID %>";
        $splitterShowContentDemo.pane4ID = "<%= RadPane4.ClientID %>";
        //]]>
    </script>
    <div class="demo-container size-wide">
        <h2>ShowContentDuringLoad="false"</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="400" Width="800">
            <telerik:RadPane ID="RadPane1" runat="server" ContentUrl="https://www.wikipedia.org"
                ShowContentDuringLoad="false">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="bar1" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server" ContentUrl="https://www.bing.com"
                ShowContentDuringLoad="false">
            </telerik:RadPane>
        </telerik:RadSplitter><br />
        <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" AutoPostBack="false" OnClientClicked="function(){setUrl('RadPane2')}"
            Text="Set new page in second pane"></telerik:RadButton>
    </div>
    <div class="demo-container size-wide">
        <h2>ShowContentDuringLoad="true" (default)</h2>
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter2" runat="server" Height="400" Width="800">
            <telerik:RadPane ID="RadPane3" runat="server" ContentUrl="https://www.wikipedia.org">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane4" runat="server" ContentUrl="https://www.bing.com">
            </telerik:RadPane>
        </telerik:RadSplitter><br />
        <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="server" AutoPostBack="false" OnClientClicked="function(){setUrl('RadPane4')}"
            Text="Set new page in second pane"></telerik:RadButton>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance