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

Loading External Content

  • Grid
  • Editor
  • Async Upload
  • Scheduler
  • HTML5 Chart
  • TreeView

With RadMultiPage control you could easily load external content using the ContentUrl property of its PageViews. The content is loaded in an iframe element nested in the PageView's DOM element. A PageView with ContentUrl will make a "get" request to load its content once it is visualised for the first time in order to achieve better performance.

  • DefaultCS.aspx
  • styles.css
<%@ Page  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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 no-bg">
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server"  MultiPageID="RadMultiPage1" Skin="MetroTouch" SelectedIndex="0" Align="Justify">
            <Tabs>
                <telerik:RadTab Text="Grid"></telerik:RadTab>
                <telerik:RadTab Text="Editor"></telerik:RadTab>
                <telerik:RadTab Text="Async Upload"></telerik:RadTab>
                <telerik:RadTab Text="Scheduler"></telerik:RadTab>
                <telerik:RadTab Text="HTML5 Chart"></telerik:RadTab>
                <telerik:RadTab Text="TreeView"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" CssClass="RadMultiPage" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView1" runat="server" Height="700px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" Height="700px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/overview"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" Height="700px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/asyncupload/overview"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView5" runat="server" Height="700px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/scheduler/overview"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView6" runat="server" Height="700px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/overview"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView7" runat="server" Height="700px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/overview"></telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance