TabStrip - Render Selected Page Only

  • RadGrid
  • RadScheduler
  • RadHTMLChart
ProductNameSupplierCategoryEdit
Page size:
 77 items in 8 pages
Chai Exotic Liquids Beverages
Chang Exotic Liquids Beverages
Aniseed Syrup Exotic Liquids Condiments
Chef Anton's Cajun Seasoning New Orleans Cajun Delights Condiments
Chef Anton's Gumbo Mix New Orleans Cajun Delights Condiments
Grandma's Boysenberry Spread Grandma Kelly's Homestead Condiments
Uncle Bob's Organic Dried Pears Grandma Kelly's Homestead Produce
Northwoods Cranberry Sauce Grandma Kelly's Homestead Condiments
Mishi Kobe Niku Tokyo Traders Meat/Poultry
Ikura Tokyo Traders Seafood
  • today
April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
4/15/2012 - 4/21/2012
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
Meeting with customers.
Assigned to: Bob, Charlie
Location: Meeting room 101
Guided tour for the investors.
Assigned to: Bob
Construction documentation review.
Assigned to: Alex, Bob
Take the car to the service.
Assigned to: Alex
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

Demo Configurator

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

This example demonstrates how the RenderSelectedPageOnly property of RadMultiPage can significantly improve the performance of your application, when a large amount of data and HTML is loaded in each PageView.

If you set the RenderSelectedPageOnly property to true, only the content of the currently selected PageView will be loaded on the page. When another tab is selected, RadMultiPage will make a request to the server in order to load the content of the newly selected PageView.

The checkbox in the demo configurator allows you to enable and disable the RenderSelectedPageOnly functionality and observe the performance gains it brings for your app.

  • DefaultCS.aspx
  • RadGridsUserControlCS.ascx
    • RadGridsUserControlCS.ascx
    • RadHTMLChartUserControlCS.ascx
    • RadSchedulerUserControlCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • RadGridsUserControlCS.ascx.cs
    • RadHTMLChartUserControlCS.ascx.cs
    • RadSchedulerUserControlCS.ascx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.MultiPage.RenderSelectedPageOnly.DefaultCS"Language="c#"  %>

<%@ Register Src="~/TabStrip/Examples/MultiPage/RenderSelectedPageOnly/RadGridsUserControlCS.ascx" TagName="RadGridsUserControlCS" TagPrefix="uc" %>
<%@ Register Src="~/TabStrip/Examples/MultiPage/RenderSelectedPageOnly/RadSchedulerUserControlCS.ascx" TagName="RadSchedulerUserControlCS" TagPrefix="uc" %>
<%@ Register Src="~/TabStrip/Examples/MultiPage/RenderSelectedPageOnly/RadHTMLChartUserControlCS.ascx" TagName="RadHTMLChartUserControlCS" TagPrefix="uc" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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>
    <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" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Icon="DBReset" Type="warning">
        <span id="total"></span>
    </qsf:MessageBox>
    <div class="demo-container no-bg">
        <telerik:RadTabStrip RenderMode="Lightweight" runat="server" Skin="Silk"
            ID="RadTabStrip1"
            
            Align="Justify"
            AutoPostBack="true"
            MultiPageID="RadMultiPage1"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="RadGrid"></telerik:RadTab>
                <telerik:RadTab Text="RadScheduler"></telerik:RadTab>
                <telerik:RadTab Text="RadHTMLChart"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
            <telerik:RadPageView runat="server" Height="460px" ID="RadPageView1">
                <div class="contentWrapper">
                    <uc:RadGridsUserControlCS runat="server" ID="RadGridsUserControlCS" />
                </div>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" Height="460px" ID="RadPageView2">
                <div class="contentWrapper">
                    <uc:RadSchedulerUserControlCS runat="server" ID="RadSchedulerUserControlCS" />
                </div>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" Height="460px" ID="RadPageView3" CssClass="RadPageView3">
                <div class="contentWrapper">
                    <uc:RadHTMLChartUserControlCS runat="server" ID="RadHTMLChartUserControlCS" />
                </div>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>

    <script type="text/javascript">
        /* <![CDATA[ */

        var startTime,
            endTime;


        Sys.Application.add_init(function () {
            startTime = new Date();
        });
        Sys.Application.add_load(function (sender, args) {
            if (!args.get_isPartialLoad()) {
                endTime = new Date();
                $get("total").innerHTML = "Page loaded in <b>" + (endTime - startTime) + "ms</b>";
            }

            startTime = null;
            endTime = null;
        });

        /* ]]> */
    </script>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" >
        <Views>
            <qsf:View>
                <asp:CheckBox runat="server" ID="CheckBox" Text="RenderSelectedPageOnly" AutoPostBack="true" OnCheckedChanged="CheckBox_CheckedChanged" />
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?