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

AJAX-Enabled TabStrip and MultiPage



  • Doctor Profile
  • Patients List
  • Schedule
  • Dr. Lucia Amado
  • Spain
  • +1 390 552 11 ext 351
  • l.amado@example.com
Photo of Diego Roel
  • Diego Roel
  • Accounting Manager
  • Madrid
  • Spain
  • (91) 555 94 44
Photo of Eduardo Saavedra
  • Eduardo Saavedra
  • Marketing Manager
  • Barcelona
  • Spain
  • (93) 203 4560
Photo of José Pedro Freyre
  • José Pedro Freyre
  • Sales Manager
  • Sevilla
  • Spain
  • (95) 555 82 82
Photo of Alejandra Camino
  • Alejandra Camino
  • Accounting Manager
  • Madrid
  • Spain
  • (91) 745 6200
  • today
July 2013
July 2013
SMTWTFS
 123456
78910111213
14151617181920
21222324252627
28293031   
       
7/7/2013 - 7/13/2013
all day
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
Medical Exams
Surgery
Show 24 hours...

This demo shows how to Ajaxify RadTabStrip and RadPageView with RadAjaxManager. The RadTabStrip and the RadComboBox are configured to perform ajax requests instead of regular postbacks. This is done by configuring the RadAjaxManager setting, where in additiona a loading panel is set to be displayed while the call to the server is processing.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadComboBox1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="RadMultiPage1" />
            </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
Notes: In some Ajax scenarios RadTabStrip requires to update itself and the assigned RadMultiPage.
In scenarios where you have multiple postback controls in the PageViews, instead of adding separate ajax settings for them, we recommend you to ajaxify the RadMultiPage. And for better performance set its RenderSelectedPageOnly property to true
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.ApplicationScenarios.AjaxEnabledTabstripAndMultipage.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" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadComboBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container">
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Label="Doctors List" AutoPostBack="true" Width="220" 
            OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" OnItemDataBound="RadComboBox1_ItemDataBound">
        </telerik:RadComboBox>
        <asp:Label ID="lblSelectedTab" runat="server" />
        <br />
        <br />
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Width="720" Align="Justify"
            OnTabClick="RadTabStrip1_TabClick" AutoPostBack="true" >
            <Tabs>
                <telerik:RadTab PageViewID="RadPageView1" Text="Doctor Profile" ImageUrl="images/doctor.png" />
                <telerik:RadTab PageViewID="RadPageView2" Text="Patients List" ImageUrl="images/patients.png" />
                <telerik:RadTab PageViewID="RadPageView3" Text="Schedule" ImageUrl="images/calendar.png" />
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" CssClass="RadMultiPage" runat="server" Width="718">
            <telerik:RadPageView ID="RadPageView1" CssClass="pageView1" runat="server" Selected="true">
                <div class="details">
                    <div class="photo-container">
                        <asp:Image ID="Image1" runat="server" ImageUrl="images/doc1.jpg" />
                    </div>
                    <div class="data-container">
                        <ul class="data-label">
                            <li>
                                <label>Name</label>
                            </li>
                            <li>
                                <label>Country</label>
                            </li>
                            <li>
                                <label>Phone</label>
                            </li>
                            <li>
                                <label>Email</label>
                            </li>
                        </ul>
                        <ul class="data-info">
                            <li>
                                <asp:Literal ID="lblName" runat="server" />
                            </li>
                            <li>
                                <asp:Literal ID="lblCountry" runat="server" />
                            </li>
                            <li>
                                <asp:Literal ID="lblPhone" runat="server" />
                            </li>
                            <li>
                                <asp:Literal ID="lblEmail" runat="server" />
                            </li>
                        </ul>
                    </div>
                </div>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" CssClass="pageView2" runat="server">
                <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource1" 
                    ItemPlaceholderID="ListViewContainer">
                    <LayoutTemplate>
                        <asp:PlaceHolder runat="server" ID="ListViewContainer" />
                    </LayoutTemplate>
                    <ItemTemplate>
                        <div class="details">
                            <div class="photo-container">
                                <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%# Eval("Photo") == DBNull.Value? new System.Byte[0]: Eval("Photo") %>'
                                    AutoAdjustImageControlSize="false" Width="90px" Height="110px" ToolTip='<%#Eval("ContactName", "Photo of {0}") %>'
                                    AlternateText='<%#Eval("ContactName", "Photo of {0}") %>' />
                            </div>
                            <div class="data-container">
                                <ul>
                                    <li>
                                        <label>
                                            Patient Name:</label>
                                        <%#Eval("ContactName")%>
                                    </li>
                                    <li>
                                        <label>
                                            Title:</label>
                                        <%#Eval("ContactTitle")%>
                                    </li>
                                    <li>
                                        <label>
                                            City:</label>
                                        <%#Eval("City")%>
                                    </li>
                                    <li>
                                        <label>
                                            Country:</label>
                                        <%#Eval("Country")%>
                                    </li>
                                    <li>
                                        <label>
                                            Phone:</label>
                                        <%#Eval("Phone")%>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </ItemTemplate>
                </telerik:RadListView>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" CssClass="pageView3" runat="server">
                <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" MonthView-UserSelectable="false" 
                    TimelineView-UserSelectable="false" SelectedView="WeekView" DayView-UserSelectable="false"
                    WeekView-UserSelectable="false" AllowInsert="false" AllowEdit="false" AllowDelete="false"
                    SelectedDate="07/07/2013" />
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="<%$ ConnectionStrings:TelerikConnectionString.ProviderName %>"
        SelectCommand="SELECT TOP 4 * FROM [CustomerPhotos] WHERE ([Country] = @Country)">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadComboBox1" Name="Country" PropertyName="SelectedValue" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" />
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance