Splitter - Show Content During Load

ShowContentDuringLoad="false"


ShowContentDuringLoad="true" (default)


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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>
    <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="http://blogs.telerik.com"
                ShowContentDuringLoad="false">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="bar1" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server" ContentUrl="http://www.telerik.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="http://blogs.telerik.com">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane4" runat="server" ContentUrl="http://www.telerik.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>

Find Assistance

Help Us Improve

Was this example helpful?