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

Data Binding

Binding a RadTimePicker control to a data source is easy provided you use the DbSelectedDate property. It works almost like the SelectedDate one, but does not throw an exception when given a null value.

When embedding RadTimePicker control inside a data-bound control, use a data-binding expression to bind the value of the input control to the data source of the parent control. Data-binding expressions are contained within <%# and %> delimiters and use the Eval and Bind functions. The Eval function is used to define one-way (read-only) binding. The Bind function is used for two-way (updatable) binding.

In addition to calling Eval and Bind methods to perform data binding in a data-binding expression, you can call any publicly scoped code within the <%# and %> delimiters to execute that code and return a value during page processing.

Data-binding the picker control

The following example demonstrates how to bind a RadTimePicker control inside a RadGrid.

 <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False" 
    OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand">
    <MasterTableView Width="100%" EditMode="InPlace">
            <telerik:GridTemplateColumn HeaderText="Available times" UniqueName="TemplateColumn">
                    <asp:Label runat="server" ID="date" Text='<%# Eval("Times", "{0:D}") %>'>
                    <telerik:RadTimePicker RenderMode="Lightweight" ID="picker1" MinDate="2006/1/1" runat="server" DbSelectedDate='<%# Bind("Times") %>'>
            <telerik:GridEditCommandColumn ButtonType="ImageButton" />

You can also bind RadTimePicker to a custom collection of time. Check out the following code snippet for illustration:

<h4>Binding to generic list of DateTime</h4>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker3" Skin="Silk" runat="server" />
<br />
<h4>Binding to ArrayList of DateTime</h4>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker4" Skin="Silk" runat="server" />
<br />
<h4>Binding to DateTime array</h4>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker5" Skin="Silk" runat="server" />
<br />
<h4>Binding to object array with DateTime</h4>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker6" Skin="Silk" runat="server" />
protected void Page_Load(object sender, EventArgs e)
    List<DateTime> list = new List<DateTime>();
    RadTimePicker1.TimeView.DataList.DataSource = list;

    ArrayList arrayList = new ArrayList();
    RadTimePicker2.TimeView.DataList.DataSource = arrayList;

    RadTimePicker3.TimeView.DataList.DataSource = new DateTime[] { DateTime.Now, DateTime.Now.AddHours(1) };

    RadTimePicker4.TimeView.DataList.DataSource = new object[] { DateTime.Now, DateTime.Now.AddHours(1) };
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
    Dim list As New List(Of DateTime)()
    RadTimePicker1.TimeView.DataList.DataSource = list

    Dim arrayList As New ArrayList()
    RadTimePicker2.TimeView.DataList.DataSource = arrayList

    RadTimePicker3.TimeView.DataList.DataSource = New DateTime() {DateTime.Now, DateTime.Now.AddHours(1)}

    RadTimePicker4.TimeView.DataList.DataSource = New Object() {DateTime.Now, DateTime.Now.AddHours(1)}
End Sub

To see the live example of the above see Binding to custom collections.

In this article