Edit this page

How to use RadDateTimePicker in a DataForm

This tutorial will show you how easy and straightforward it might be to use a RadDateTimePicker control in a DataForm.

In order to do this you need to alter the default DataTemplate of your DataForm control. You have to indicate that the RadDateTimePicker control is to be used for a particular field, whenever the entity is in edit mode.

For the purpose of this example the first thing you have to do is to define the DataForm and populate it with sample data. Below are the custom business object definitions, as well as the DataForm declaration.

public class Club
{
    public Club(string name, DateTime established, int stadiumCapacity)
    {
        this.Name = name;
        this.Established = established;
        this.StadiumCapacity = stadiumCapacity;
    }
    public string Name
    {
        get;
        set;
    }
    public DateTime? Established
    {
        get;
        set;
    }
    public int StadiumCapacity
    {
        get;
        set;
    }
    public static IEnumerable<Club> GetClubs()
    {
        ObservableCollection<Club> clubs = new ObservableCollection<Club>();
        clubs.Add(new Club("Liverpool", new DateTime(1892, 1, 1), 45362));
        clubs.Add(new Club("Manchester Utd.", new DateTime(1878, 1, 1), 76212));
        clubs.Add(new Club("Chelsea", new DateTime(1905, 1, 1), 42055));
        clubs.Add(new Club("Arsenal", new DateTime(1886, 1, 1), 60355));
        return clubs;
    }
}
Public Class Club
    Public Sub New(name As String, established As DateTime, stadiumCapacity As Integer)
        Me.Name = name
        Me.Established = established
        Me.StadiumCapacity = stadiumCapacity
    End Sub
    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set(value As String)
            m_Name = value
        End Set
    End Property
    Private m_Name As String
    Public Property Established() As System.Nullable(Of DateTime)
        Get
            Return m_Established
        End Get
        Set(value As System.Nullable(Of DateTime))
            m_Established = value
        End Set
    End Property
    Private m_Established As System.Nullable(Of DateTime)
    Public Property StadiumCapacity() As Integer
        Get
            Return m_StadiumCapacity
        End Get
        Set(value As Integer)
            m_StadiumCapacity = value
        End Set
    End Property
    Private m_StadiumCapacity As Integer
    Public Shared Function GetClubs() As IEnumerable(Of Club)
        Dim clubs As New ObservableCollection(Of Club)()
        clubs.Add(New Club("Liverpool", New DateTime(1892, 1, 1), 45362))
        clubs.Add(New Club("Manchester Utd.", New DateTime(1878, 1, 1), 76212))
        clubs.Add(New Club("Chelsea", New DateTime(1905, 1, 1), 42055))
        clubs.Add(New Club("Arsenal", New DateTime(1886, 1, 1), 60355))
        Return clubs
    End Function
End Class

Remember that in order to use the DataForm control you will have to add a reference to the System.Windows.Controls.Data.DataForm.Toolkit library.

<Grid x:Name="LayoutRoot"
Background="White">
    <dataForm:DataForm x:Name="dataForm"
                       Header="DataForm"
                       AutoGenerateFields="False"
                       CommandButtonsVisibility="All">
    </dataForm:DataForm>
</Grid>

this.dataForm.ItemsSource = Club.GetClubs();
Me.dataForm.ItemsSource = Club.GetClubs()

The next and final step in this example is to define the DataTemplate which will be used when the data is in edit mode. There you should point out that for some of your data fields you want to use the RadDateTimePicker.

Here is the complete XAML:

<Grid x:Name="LayoutRoot1"
Background="White">
    <dataForm:DataForm x:Name="dataForm1"
                       Header="DataForm"
                       AutoGenerateFields="False"
                       CommandButtonsVisibility="All">
        <dataForm:DataForm.EditTemplate>
            <DataTemplate>
                <StackPanel>
                    <dataForm:DataField Label="Name">
                        <TextBlock Text="{Binding Name}"></TextBlock>
                    </dataForm:DataField>
                    <dataForm:DataField Label="Established">
                        <telerik:RadDateTimePicker SelectedValue="{Binding Established}" Width="200" />
                    </dataForm:DataField>
                    <dataForm:DataField Label="Stadium Capacity">
                        <TextBlock Text="{Binding StadiumCapacity}"></TextBlock>
                    </dataForm:DataField>
                </StackPanel>
            </DataTemplate>
        </dataForm:DataForm.EditTemplate>
    </dataForm:DataForm>
</Grid>

Here is the result:

See Also