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

Dynamic PageView Creation via AJAX

  • RadScheduler
  • RadGrid
  • RadHTMLChart
  • 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...

This example demonstrates how to fetch the contents of RadMultiPage on demand using Ajax. RadTabStrip is ajaxified and page views are created on demand in the TabClick event handler:

C#:
private void AddPageView(string pageViewID)
{
    RadPageView pageView = new RadPageView();
    pageView.ID = pageViewID;
    RadMultiPage1.PageViews.Add(pageView);
}

protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
{
    AddPageView(e.Tab.Text);
    e.Tab.PageView.Selected = true;
}
VB.NET
Private Sub AddPageView(ByVal pageViewID As String)
    Dim pageView As New RadPageView()
    pageView.ID = pageViewID
    RadMultiPage1.PageViews.Add(pageView)
End Sub

Protected Sub RadTabStrip1_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs) Handles RadTabStrip1.TabClick
    AddPageView(e.Tab.Text)
    e.Tab.PageView.Selected = True
End Sub

Ajax requests are canceled for tabs whose corresponding pageviews have been loaded. This is done by setting the postBack client-side property of the tabs during the OnClientTabSelecting event:

<script type="text/javascript">
function onTabSelecting(sender, args)
{
    if (args.get_tab().get_pageViewID())
    {
        args.get_tab().set_postBack(false);
    }
}
</script>
  • DefaultCS.aspx
  • RadGridCS.ascx
    • RadGridCS.ascx
    • RadHTMLChartCS.ascx
    • RadSchedulerCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • RadGridCS.ascx.cs
    • RadHTMLChartCS.ascx.cs
    • RadSchedulerCS.ascx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.MultiPage.DynamicPageViewCreation.DefaultCS"Language="c#"  %>

<%@ 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:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="MetroTouch">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" EnablePageHeadUpdate="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <script type="text/javascript">
            /* <![CDATA[ */
            function onTabSelecting(sender, args) {

                if (args.get_tab().get_pageViewID()) {
                    args.get_tab().set_postBack(false);
                }
            }
            /* ]]> */
        </script>
        <telerik:RadTabStrip RenderMode="Lightweight" OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0" 
            runat="server" MultiPageID="RadMultiPage1" Skin="MetroTouch" Width="100%" Align="Justify"
            OnTabClick="RadTabStrip1_TabClick">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" CssClass="RadMultiPage" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance