TabStrip - Loading External Content

  • Grid
  • Editor
  • Async Upload
  • Scheduler
  • HTML5 Chart
  • TreeView
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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>
    <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="http://www.telerik.com/products/aspnet-ajax/grid.aspx"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/editor.aspx"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/asyncupload.aspx"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView5" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/scheduler.aspx"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView6" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/html-chart.aspx"></telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView7" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/TreeView.aspx"></telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?