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

External Content

External content with scrolling

External content without scrolling

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.

  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<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 RenderMode="Lightweight" 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="https://www.wikipedia.org" target="<%= contentPane.ClientID%>">Open Wikipedia.com</a>
                    </li>
                    <li>
                        <a href="https://bing.com" target="<%= contentPane.ClientID%>">Open bing.com</a><br />
                    </li>
                    <li>
                        <a href="https://www.w3.org" target="<%= contentPane.ClientID%>">Open W3C.com</a>
                    </li>
                </ul>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="contentPane" runat="server" ContentUrl="https://bing.com">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <div class="demo-container size-wide">
        <h2>External content without scrolling</h2>
        <telerik:RadSplitter RenderMode="Lightweight" 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="https://www.wikipedia.org" target="<%= contentPane2.ClientID%>">Open Wikipedia.org</a>
                    </li>
                    <li>
                        <a href="https://bing.com" target="<%= contentPane2.ClientID%>">Open bing.com</a><br />
                    </li>
                    <li>
                        <a href="https://www.w3.org" target="<%= contentPane2.ClientID%>">Open W3C.com</a>
                    </li>
                </ul>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="contentPane2" runat="server" ContentUrl="https://bing.com"
                             Scrolling="none">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance