DataGridTemplateColumn with DatePicker requires three clicks to edit the date

Question

I have a DataGridTemplateColumn. Inside its CellEditingTemplate, I put a DatePicker control. Now if I want to edit the date, I have to

Answer 1

An easier solution would be to surround the datepicker with a grid and setting FocusManager on the DatePicker….

DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
       <Grid FocusManager.FocusedElement="{Binding ElementName=dPicker}">
           <DatePicker x:Name="dPicker"
                       SelectedDate="{Binding HistoryDate, Mode=TwoWay}"/>
       </Grid>
     </DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>

Answer 2

You have to override the PrepareCellForEdit in DataGridTemplateColumn as follows:

public class DataGridDateColumn:DataGridTemplateColumn
{
    protected override object PrepareCellForEdit(FrameworkElement editingElement,
                                                 RoutedEventArgs editingEventArgs)
    {
        editingElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.First));
        return base.PrepareCellForEdit(editingElement, editingEventArgs);
    } 
}

XAML

<Custom:DataGrid x:Name="dgData" SelectionUnit="Cell" AutoGenerateColumns="False" CanUserAddRows="False">
    <Custom:DataGrid.Columns>
        <Custom:DataGridTextColumn Binding="{Binding Subject}" Header="Subject" Width="*"/>
        <Custom:DataGridTextColumn Binding="{Binding RaisedBy}" Header="Raised By" Width="100"/>

        <DatePickerDGWPF:DataGridDateColumn Header="Raised On" Width="250">
            <DatePickerDGWPF:DataGridDateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding RaisedOn}" />
                </DataTemplate>
            </DatePickerDGWPF:DataGridDateColumn.CellTemplate>
            <DatePickerDGWPF:DataGridDateColumn.CellEditingTemplate>
                <DataTemplate>
                    <Custom:DatePicker SelectedDate="{Binding RaisedOn}"/>       
                </DataTemplate>
            </DatePickerDGWPF:DataGridDateColumn.CellEditingTemplate>
        </DatePickerDGWPF:DataGridDateColumn>
    </Custom:DataGrid.Columns>
</Custom:DataGrid>