DateTimePicker - DataBinding

RadDateTimePicker in EditItemTemplate of GridTemplateColumn

Shared calendar and shared TimeView are in use.
Available datesAdditional times 
3/10/2009 12:00:00 AM  10:11:12 
3/15/2009 12:00:00 AM  05:00:00 
   
   
4/1/2009 12:00:00 AM  23:30:30 

RadDateTimePicker embedded in GridDateTimeColumn.

Shared calendar and shared TimeView are in use.
Available datesAdditional times 
3/10/2009 12:00:00 AM10:11:12
3/15/2009 12:00:00 AM05:00:00
  
  
4/1/2009 12:00:00 AM23:30:30
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Binding a RadDateTimePicker to a data source is easy provided you use the DbSelectedDate property (in a similar way as with the RadDatePicker control).

This example demonstrates binding RadDateTimePicker control which is in a RadGrid template column:

   <EditItemTemplate>      <telerik:RadDateTimePicker ID="picker1" runat="server" DbSelectedDate='<%# Bind("Dates") %>'>      </telerik:RadDateTimePicker>   </EditItemTemplate> 

The second Grid in the presented example benefits from the GridDateTimeColumn option so that the markup/code is highly optimized. The GridDateTimeColumn's RadDateTimePicker uses a "shared" calendar and TimeView internally.

When you want to bind RadTimePicker to TimeSpan you need to set UseTimeSpanForBinding="true". This will make the DbSelectedDate to return TimeSpan instead of DateTime object. For GridDateTimeColumn this is automatically set if you use PickerType="TimePicker" and DataType="System.TimeSpan"

   <telerik:RadTimePicker UseTimeSpanForBinding="true" ID="picker2" runat="server"      DbSelectedDate='<%# Bind("Times") %>' >   </telerik:RadTimePicker> 
The demo illustrates how datetime pickers with shared calendars/time views can be used either as part of built-in RadGrid GridDateTimeColumn or inside an edit template of a GridTemplateColumn. The second approach can be used for other data-bound controls (repeaters, data lists, etc.) as well. Additionally, the DbSelectedDate property of RadDateTimePicker is of nullable type and hence supports null values.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.DataBinding.DefaultCS" %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-containers" runat="server">
        <div class="demo-container" runat="server" id="containerDiv">
            <div class="demo-container no-bg" style=" padding-right: 30px;">
                <div>
              <h3> RadDateTimePicker in EditItemTemplate of GridTemplateColumn</h3>
                    Shared calendar and shared TimeView are in use.
                </div>
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False"
                    OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"
                    OnItemCreated="RadGrid1_ItemCreated">
                    <MasterTableView EditMode="InPlace">
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Available dates" UniqueName="TemplateColumn1">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="date" Text='<%# Eval("Dates") %>'>
                                    </asp:Label>&nbsp;
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadDateTimePicker RenderMode="Lightweight" ID="picker1" runat="server" DbSelectedDate='<%# Bind("Dates") %>'
                                        Width="180px">
                                    </telerik:RadDateTimePicker>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Additional times" UniqueName="TemplateColumn1">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="time" Text='<%# Eval("Times") %>'>
                                    </asp:Label>&nbsp;
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadTimePicker RenderMode="Lightweight" UseTimeSpanForBinding="true" ID="picker2" runat="server" DbSelectedDate='<%# Bind("Times") %>'
                                        Width="100px">
                                    </telerik:RadTimePicker>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridEditCommandColumn UniqueName="EditColumn">
                            </telerik:GridEditCommandColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

                <div style="display: none;">
                    <telerik:RadCalendar RenderMode="Lightweight" ID="sharedCalendar" runat="server" EnableMultiSelect="false">
                    </telerik:RadCalendar>
                    <telerik:RadDateTimePicker RenderMode="Lightweight" ID="RadDateTimePicker1" runat="server">
                    </telerik:RadDateTimePicker>
                </div>
                <telerik:RadTimeView ID="sharedTimeView" runat="server" StartTime="9:00">
                </telerik:RadTimeView>

            </div>
            <div class="demo-container no-bg">
                <div>
                    <h3>RadDateTimePicker embedded in GridDateTimeColumn. </h3>
                    Shared calendar and shared TimeView are in use.
                </div>
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" runat="server" AutoGenerateColumns="False"
                    OnNeedDataSource="RadGrid2_NeedDataSource" OnUpdateCommand="RadGrid2_UpdateCommand">
                    <MasterTableView EditMode="InPlace">
                        <Columns>
                            <telerik:GridDateTimeColumn PickerType="DateTimePicker" HeaderText="Available dates"
                                DataField="Dates">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridDateTimeColumn PickerType="TimePicker" DataType="System.TimeSpan" HeaderText="Additional times"
                                DataField="Times">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridEditCommandColumn UniqueName="EditColumn">
                            </telerik:GridEditCommandColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?