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

AJAX-Enabled TabStrip and MultiPage

Doctors List

Doctor Profile
Patients List
Schedule

Name
Country
Phone
Email

Dr. Lucia Amado
Spain
+1 390 552 11 ext 351
l.amado@example.com

Patient Name: Alejandra Camino
Title: Accounting Manager
City: Madrid
Country: Spain
Phone: (91) 745 6200

today

July 2013

July 2013
S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

7/7/2013 - 7/13/2013

Sun, 7	Mon, 8	Tue, 9	Wed, 10	Thu, 11	Fri, 12	Sat, 13

all day

8AM

9AM

10AM

11AM

12PM

1PM

2PM

3PM

4PM

5PM

Show 24 hours...

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

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

<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="TabStrip.Examples.ApplicationScenarios.AjaxEnabledTabstripAndMultipage.DefaultVB" %>

<%@ 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="200" 
            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='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'
                                    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" 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>
        <br />
        <br />
        <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" />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support

AJAX-Enabled TabStrip and MultiPage

Related Resources

Support & Learning Resources

Find Assistance