Edit this page

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.

note

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">
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Available times" UniqueName="TemplateColumn">
                <ItemTemplate>
                    <asp:Label runat="server" ID="date" Text='<%# Eval("Times", "{0:D}") %>'>
                    </asp:Label>
                    &nbsp;
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadTimePicker RenderMode="Lightweight" ID="picker1" MinDate="2006/1/1" runat="server" DbSelectedDate='<%# Bind("Times") %>'>
                    </telerik:RadTimePicker>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridEditCommandColumn ButtonType="ImageButton" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

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>();
    list.Add(DateTime.Now);
    list.Add(DateTime.Now.AddHours(1));
    list.Add(DateTime.Now.AddHours(2));
    list.Add(DateTime.Now.AddHours(3));
    RadTimePicker1.TimeView.DataList.DataSource = list;

    ArrayList arrayList = new ArrayList();
    arrayList.Add(DateTime.Now);
    arrayList.Add(DateTime.Now.AddHours(1));
    arrayList.Add(DateTime.Now.AddHours(2));
    arrayList.Add(DateTime.Now.AddHours(3));
    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)()
    list.Add(DateTime.Now)
    list.Add(DateTime.Now.AddHours(1))
    list.Add(DateTime.Now.AddHours(2))
    list.Add(DateTime.Now.AddHours(3))
    RadTimePicker1.TimeView.DataList.DataSource = list

    Dim arrayList As New ArrayList()
    arrayList.Add(DateTime.Now)
    arrayList.Add(DateTime.Now.AddHours(1))
    arrayList.Add(DateTime.Now.AddHours(2))
    arrayList.Add(DateTime.Now.AddHours(3))
    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.

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy