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

Render Selected Page Only

  • RadGrid
  • RadScheduler
  • RadHTMLChart
ProductNameSupplierCategoryEdit
tryt Aux joyeux ecclésiastiques Confections
  • 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

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>
<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>

Support & Learning Resources

Find Assistance