RadDateTimePicker in RadGridView (WPF)

[Moon]

Hi,

I am using RadGridView in WPF application and binding it to a DataTable view. For my RadGridView I have set AutoGenerateColumns as "True" (to get my columns automatically).
 
Problem: In DataTable object (which I am binding to RadDataGridView) I have one DateTime column. In RadDataGridView it only shows Date calender in the dropdown for picking date, but no time. More over I want to change date format for DateTime column. As AutoGenerateColumns  is true, I don't have any control over the columns. Can anyone please show me how to show RadDateTimePicker in RadGridView column when AutoGenerateColumns is True?

My XAML code for RadGridView  is as below:

<telerik:RadGridView Grid.Row="1" AutoGenerateColumns="True" ItemsSource="{Binding ManualDataTable}" IsReadOnly="False" CanUserDeleteRows="True"  Name="radGridViewManualData" ShowInsertRow="True" />

Any help will be highly appreciated.


Regards,
Moon 

[Pavel Pavlov]

Hi,

You can handle the AutoGeneratingColumn event of RadGridView. Inside the event handler you can set an alternative CellTemplate or  CellEditTemplate for the datetime column.

Greetings,
Pavel Pavlov
the Telerik team

[Moon]

Hi Pavel,

Thanks for your reply. I appreciate it. 

I have tried to handle AutoGeneratingColumn event of RadGridView, but unable to achieve desired result. I would appreciate if you can please attach some sample code (code snippet) for showing both Date and Time picker on AutoGeneratingColumn event of RadGridView.

Thanks in advance.

Regards,
Moon

[Moon]

Hi,

Can anyone please send me sample code to resolve this issue?

Any help will be highly appreciated. 

Thanks,
Moon

[Simon]

I too have a similar issue. Is customer support aware of this open thread?

If anyone has an answer, please post it to this thread.

Cheers,

Simon

[Moon]

Hi Simon,

Sorry I was out of station.

Are you able to resolve this? If not then let me know, I will send you work around.


Cheers,
Moon

[Simon]

Hi Moon,

I have not yet resolved this issue (got called on something else). I would appreciate to see how you worked around this issue!

Many thanks,

Simon

[Moon]

hi Simon,

It is not the ideal solution but a work around.

You have to make changes at two places -- in your XAML and in the code behind as below:

XAML:
<Window.Resources>
        <DataTemplate x:Key="MyDateTimePicker">
            <telerik:RadDateTimePicker SelectedValue="{Binding Path=TimeStamp, Mode=TwoWay}" />
        </DataTemplate>
</Window.Resources> 

Code behind:
private void radGridViewManual_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
        {
            if (e.Column.UniqueName == "TimeStamp")  // Find out Column by name in which you want to apply DateTimePicker, in my case column name is "TimeStamp"
{
                e.Column.CellEditTemplate = (DataTemplate)Resources["MyDateTimePicker"];
}
        }

I hope this would help you.


Cheers!

[Simon]

This is awesome, this works well, thank you so much for you answer!

[Joel Palmer]

I figured out how to do this in the code behind.  In the AutoGeneratingColumn event on the RadDataGrid:

 

if(e.ItemPropertyInfo.Name == "Timestamp")
{
    FrameworkElementFactory factory =
        new FrameworkElementFactory(typeof(RadDateTimePicker));

    Binding placeBinding = new Binding();
    factory.SetBinding(RadDateTimePicker.SelectedValueProperty,
        ((GridViewDataColumn) e.Column).DataMemberBinding);

    e.Column.CellEditTemplate =
        new DataTemplate()
        {
            VisualTree = factory
        };
    e.Column.CellEditTemplate.Seal();
}

[Joel Palmer]

Cleaned up my code:

if(e.ItemPropertyInfo.Name == "Timestamp")
{
    FrameworkElementFactory factory =
        new FrameworkElementFactory(typeof(RadDateTimePicker));

    factory.SetBinding(RadDateTimePicker.SelectedValueProperty,
        ((GridViewDataColumn) e.Column).DataMemberBinding);

    e.Column.CellEditTemplate =
        new DataTemplate()
        {
            VisualTree = factory
        };
    e.Column.CellEditTemplate.Seal();
}