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

Shared TimeView

Flights from New York to Los Angeles






Flights from Los Angeles to New York







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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.SharedTimeViews.DefaultCS" %>

<%@ 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>
    <style type="text/css">
        .controls
        {
            width: 100%;
            min-width: 500px;
        }
    </style>
</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="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container " style="max-width: 930px" runat="server" id="Div2">
            <div class="demo-container no-bg" style="max-width: 400px; padding-left: -20px; padding-right: 70px">
                <div>
                    <h3>Flights from New York to Los Angeles</h3>
                    <br />
                    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="285px">
                        <Items>
                            <telerik:RadComboBoxItem Text="Departure" Value="Departure" Selected="true"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Arrival" Value="Arrival"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                    <br />
                    <br />
                    <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" runat="server" SharedTimeViewID="sharedTimeView" DateInput-Label="From:"
                        Width="180px">
                    </telerik:RadTimePicker>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="*"
                        ControlToValidate="RadTimePicker1" ValidationGroup="group1" Display="Dynamic"></asp:RequiredFieldValidator>
                    <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker2" runat="server" Width="180px" DateInput-Label="To">
                    </telerik:RadTimePicker>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="*"
                        ControlToValidate="RadTimePicker2" ValidationGroup="group1" Display="Dynamic"></asp:RequiredFieldValidator>
                    <br />
                    <br />
                    <telerik:RadButton RenderMode="Lightweight" ID="Button3" runat="server" Text="Search for flights" OnClick="Button1_Click"
                        ValidationGroup="group1">
                    </telerik:RadButton>
                </div>

            </div>
            <div class="demo-container no-bg " style="max-width: 400px">
                <div>
                    <h3>Flights from Los Angeles to New York</h3>
                    <br />
                    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server" Width="285px">
                        <Items>
                            <telerik:RadComboBoxItem Text="Departure" Value="Departure" Selected="true"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Arrival" Value="Arrival"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                    <br />
                    <br />
                    <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker3" runat="server" SharedTimeViewID="sharedTimeView"
                        Width="180px" DateInput-Label="From:">
                    </telerik:RadTimePicker>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*"
                        ControlToValidate="RadTimePicker3" ValidationGroup="group2" Display="Dynamic"></asp:RequiredFieldValidator>

                    <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker4" runat="server" Width="180px" DateInput-Label="To:">
                    </telerik:RadTimePicker>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
                        ControlToValidate="RadTimePicker4" ValidationGroup="group2" Display="Dynamic"></asp:RequiredFieldValidator>
                    <br />
                    <br />
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" Text="Search for flights" OnClick="Button2_Click"
                        ValidationGroup="group2">
                    </telerik:RadButton>
                </div>
            </div>
            <br />
            <div>
                <asp:Panel ID="Panel1" runat="server">
                    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" PageSize="5" 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>
            </div>
        </div>
    </div>

    <telerik:RadTimeView ID="sharedTimeView" runat="server" StartTime="06:00:00">
    </telerik:RadTimeView>
    <telerik:RadTimeView ID="sharedDynamicTimeView" runat="server" StartTime="07:00:00">
    </telerik:RadTimeView>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance