Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Calendar / Sharing TimeViews

Flights from New York to Los Angeles
select
From: To:

Flights from Los Angeles to New York
select
From: To:



  • When you have many RadTimePicker and/or RadDateTimePicker controls on a page, this might render large amount of HTML and impact performance. For this case, to reduce the html and speed up the loading time, RadTimePicker/RadDateTimePciker controls can share an instance of TimeView control for picking times.  

    You could configure the shared popup control in two ways:

    • in the VS.NET designer - by setting the ID of the shared RadTimeView control to the RadTimePicker.SharedTimeViewID property.
    • in code-behind - by passing a reference of the shared RadTimeView control to the RadTimePicker.SharedTimeView property.

    This example illustrates both approaches for configuring RadTimePickers to use shared RadTimeView controls.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.SharedTimeViews.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Button2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table cellpadding="5" cellspacing="5" style="width: 350px">
                        <thead>
                            <tr>
                                <td align="center" colspan="4">
                                    <b>Flights from New York to Los Angeles</b><br />
                                    <br />
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td align="center" colspan="4">
                                    <telerik:RadComboBox ID="RadComboBox1" runat="server">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="Departure" Value="Departure" Selected="true" />
                                            <telerik:RadComboBoxItem Text="Arrival" Value="Arrival" />
                                        </Items>
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="right" valign="middle">
                                    From:
                                </td>
                                <td>
                                    <telerik:RadTimePicker ID="RadTimePicker1" runat="server" SharedTimeViewID="sharedTimeView">
                                    </telerik:RadTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
    ControlToValidate="RadTimePicker1" ValidationGroup="group1"></asp:RequiredFieldValidator>
                                </td>
                                <td align="right" valign="middle">
                                    To:
                                </td>
                                <td>
                                    <telerik:RadTimePicker ID="RadTimePicker2" runat="server">
                                    </telerik:RadTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
    ControlToValidate="RadTimePicker2" ValidationGroup="group1"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="4">
                                    <br />
    <asp:Button ID="Button1" runat="server" Text="Search for flights" OnClick="Button1_Click"
    ValidationGroup="group1" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td>
                    <table cellpadding="5" cellspacing="5" style="width: 350px">
                        <thead>
                            <tr>
                                <td align="center" colspan="4">
                                    <b>Flights from Los Angeles to New York</b><br />
                                    <br />
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td align="center" colspan="4">
                                    <telerik:RadComboBox ID="RadComboBox2" runat="server">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="Departure" Value="Departure" Selected="true" />
                                            <telerik:RadComboBoxItem Text="Arrival" Value="Arrival" />
                                        </Items>
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="right" valign="middle">
                                    From:
                                </td>
                                <td>
                                    <telerik:RadTimePicker ID="RadTimePicker3" runat="server" SharedTimeViewID="sharedTimeView">
                                    </telerik:RadTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*"
    ControlToValidate="RadTimePicker3" ValidationGroup="group2"></asp:RequiredFieldValidator>
                                </td>
                                <td align="right" valign="middle">
                                    To:
                                </td>
                                <td>
                                    <telerik:RadTimePicker ID="RadTimePicker4" runat="server">
                                    </telerik:RadTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*"
    ControlToValidate="RadTimePicker4" ValidationGroup="group2"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="4">
                                    <br />
    <asp:Button ID="Button2" runat="server" Text="Search for flights" OnClick="Button2_Click"
    ValidationGroup="group2" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <asp:Panel ID="Panel1" runat="server">
            <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowSorting="true"
                AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource">
                <MasterTableView AutoGenerateColumns="false">
                    <Columns>
                        <telerik:GridBoundColumn DataField="DepartureCity" UniqueName="DepartureCity" HeaderText="Departure City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Departure" UniqueName="Departure" HeaderText="Departure">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Arrival" UniqueName="Arrival" HeaderText="Arrival">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ArrivalCity" UniqueName="ArrivalCity" HeaderText="Arrival City">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </asp:Panel>
        <telerik:RadTimeView ID="sharedTimeView" runat="server" StartTime="06:00:00">
        </telerik:RadTimeView>
        <telerik:RadTimeView ID="sharedDynamicTimeView" runat="server" StartTime="07:00:00">
        </telerik:RadTimeView>
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451