TabStrip - 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...
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

Find Assistance

Help Us Improve

Was this example helpful?