Splitter - External Content

External content with scrolling

External content without scrolling

Isolate this demo as a stand-alone application

You can load any external url into a splitter pane if you specify the ContentUrl property of the RadPane control. You can disable the scrollbars of the loaded page by setting the Scrolling property of the RadPane to none.
If you want to use the pane with external content from the other links in your page you can set the target property of the link to be the same as the ClientID property of the pane that is used to display the external content.

<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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-wide">
        <h2>External content with scrolling</h2>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="400" Width="795">
            <telerik:RadPane ID="RadPane1" runat="server" Width="150">
                Left Pane
                <ul class="fb-group">
                    <li>
                        <a href="http://www.telerik.com/" target="<%= contentPane.ClientID%>">Open telerik.com</a>
                    </li>
                    <li>
                        <a href="http://bing.com" target="<%= contentPane.ClientID%>">Open bing.com</a><br />
                    </li>
                    <li>
                        <a href="http://www.stumbleupon.com/" target="<%= contentPane.ClientID%>">Open stumbleupon.com</a>
                    </li>
                </ul>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="contentPane" runat="server" ContentUrl="http://blogs.telerik.com">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-wide">
        <h2>External content without scrolling</h2>
        <telerik:RadSplitter ID="Radsplitter2" runat="server" Height="400" Width="795">
            <telerik:RadPane ID="Radpane3" runat="server" Width="150">
                Left Pane<br />
                <ul class="fb-group">
                    <li>
                        <a href="http://www.telerik.com/" target="<%= contentPane2.ClientID%>">Open telerik.com</a>
                    </li>
                    <li>
                        <a href="http://bing.com" target="<%= contentPane2.ClientID%>">Open bing.com</a><br />
                    </li>
                    <li>
                        <a href="http://www.stumbleupon.com/" target="<%= contentPane2.ClientID%>">Open stumbleupon.com</a>
                    </li>
                </ul>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="contentPane2" runat="server" ContentUrl="http://blogs.telerik.com"
                             Scrolling="none">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?