TabStrip - 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 Martín Sommer
  • Martín Sommer
  • Owner
  • Madrid
  • Spain
  • (91) 555 22 82
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
  • 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...
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

Find Assistance

Help Us Improve

Was this example helpful?