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

Render Selected Page Only

  • RadGrid
  • RadScheduler
  • RadHTMLChart
ProductNameSupplierCategoryEdit
334343 Plutzer Lebensmittelgroßmärkte AG Meat/Poultry
amazine Aux joyeux ecclésiastiques Beverages
  • 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