Windowscommunitytoolkit: DataGrid DataGridTemplateColumn CalendarDatePicker and DatePicker Flash Then Desappear!

[maxmin88]

I'm submitting a...

Bug report (I searched for similar issues and did not find one)

Current behavior

In a DataGridTemplateColumn with a CalendarDatePicker as the template when clicking on the date or icon the calendar picker flashes and then disappears. This is the same for CalendarDatePicker and DatePicker. Also the same result if CellTemplate or CellEditTemplate is used.

See code example below.

Expected behavior

Should be able to click on the date or the calendar icon and the calendar grid or date picker should open and stay open until the date is selected. The resulting date selected should be displayed in the date view.

Minimal reproduction of the problem with instructions

Please see example code below.

Environment

Nuget Package(s): 
Microsoft.Toolkit.Uwp.UI.Controls.DataGrid
Package Version(s): 
4.0

Windows 10 Build Number:
- [ ] Creators Update (15063)
- [ ] Fall Creators Update (16299)
- [x ] April 2018 Update (17134)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Creators Update (15063)
- [ min] Fall Creators Update (16299)
- [ target ] April 2018 Update (17134)
- [ ] Insider Build (xxxxx)

Device form factor:
- [X ] Desktop
- [ ] Mobile
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ X] 2017 (version: 15.8.4 )
- [ ] 2017 Preview (version: )

<UserControl.Resources> <DataTemplate x:Key="CalendarCell"> <TextBlock Text="{Binding DateCreated}"/> </DataTemplate> <DataTemplate x:Key="CalendarCellEdit"> <CalendarDatePicker Date="{Binding DateCreated}" /> </DataTemplate> </UserControl.Resources>

<dg:DataGrid x:Name="grdNotes" > <dg:DataGrid.Columns> <dg:DataGridTemplateColumn CellTemplate="{StaticResource CalendarCell}" CellEditingTemplate="CalendarCellEdit"/> </dg:DataGrid.Columns> </dg:DataGrid>

[lucaasrojas]

Can you provide a reproduction project?

[maxmin88]

DataGridCalendarPickerTemplateBug.zip
OK. Here is a sample project showing the problem. I have tried options such as a single CalendarDatePicker in just the CellTemplate (no CellEditTemplate) and also the DatePicker and the results are the same.

And, I also just noticed, that the CalenderDatePicker is not getting it's Date set with the Binding to the CreatedDate field.

I also put a CalendarDatePicker directly on the page to show normal operation.

Hopefully there is a solution to this.

Thanks.

[RBrid]

I don't have an explanation for the flashing issue yet - I suspect it's a focus problem. The CalendarDatePicker's drop-down must be losing focus right away.

As for the second part, i.e. the binding not working: make sure you bind the CalendarDatePicker.Date property to a DateTimeOffset. In my test scenario, I have a Person object with a DateOfBirth DateTime property, and I can bind to the Person.DateOfBirthOffset property which is defined as:

public class Person
{
...
public DataTimeOffset DateOfBirthOffset
{
get { return new DateTimeOffset(this.DateOfBirth); }
set { this.DateOfBirth = value.DateTime;
}
}

[edd2000uk]

Did you find any solution to this, I have the same problem with the CalendarDatePicker flashing up then disappearing. However if I select the picker on a different row it works. It seems that I can select a picker for the first time, then if I try to reselect it has the problem. If I select a picker on a new row then it works.

[lucaasrojas]

@RBrid what is the current status?

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[windowstoolkitbot]

Issue is inactive. It was automatically closed.

[tedrog36]

It is unfortunate this was closed. This is a pretty serious issue for a very common scenario. It is preventing me from using the DataGrid. Should I resubmit the issue? BTW...I just tested the provided project with the latest stable version of DataGrid (5.1.0) and it still does not work properly.

[tedrog36]

For anybody else who is wrestling with this issue it can be solved by setting IsReadOnly to true for the DataGridTemplateColumn that contains the CalendarDatePicker. That way you don't have a conflict between the editing mode and the CalendardDatePicker going into its own editing mode.

See code I modified from provided project: I also switched to using x:Bind.

<Page xmlns:my="using:Microsoft.Toolkit.Uwp.UI.Controls" 
    x:Class="DataGridCalendarPickerTemplateBug.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataGridCalendarPickerTemplateBug"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

   <Page.Resources>
      <local:StringFormatConverter x:Key="StringFormatConverter"/>
        <DataTemplate x:Key="CalendarCell" x:DataType="local:Item">
            <CalendarDatePicker Date="{x:Bind DateCreatedOffset}" Margin="3,4,3,3"/>
         </DataTemplate>
    </Page.Resources>

    <Grid>
      <StackPanel>
         <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
            <TextBlock Text="Sample Standard CalendarDatePicker on a page:" Margin="5,3,0,0"/>
            <CalendarDatePicker Name="cdpMyDate"  Margin="8,0,0,0" />
         </StackPanel>

      <my:DataGrid Name="dgDates" AutoGenerateColumns="false" Margin="8,8,0,0"  BorderBrush="LightGray" BorderThickness="1" GridLinesVisibility="Horizontal" Width="250" Height="200" HorizontalAlignment="Left">
         <my:DataGrid.Columns>
               <my:DataGridTemplateColumn CellTemplate="{StaticResource CalendarCell}" IsReadOnly="True" Header="Date"/>
               <my:DataGridTextColumn Binding="{Binding Text}" Header="Description"/>
            </my:DataGrid.Columns>
      </my:DataGrid>
      </StackPanel>
   </Grid>
</Page>

[Kyaa-dost]

@jcbeppler ⬆️

[Kyaa-dost]

Seems like this issue is still active as @jcbeppler pointed out in #3557

CC: @anawishnoff @RBrid

[jcbeppler]

@Kyaa-dost after I mentioned this issue, I just realized a second issue which is related to WinUI and the CalendarDatePicker. It is possible that the issue there, generates this issue with the toolkit. See here:

https://github.com/microsoft/microsoft-ui-xaml/issues/3571

[Kyaa-dost]

@jcbeppler good catch! There is a possibility. We can find this out once the devs investigate this further. Meanwhile, feel free to dive into further analysis or possible resolution.

[jcbeppler]

@Kyaa-dost I made a couple of attempts and found out that the same issue exist with the TimePicker using the DataGridTemplateColumn. It is really quite annoying because I don't have a workable way to unselect the current row so the user wouldn't notice the issue.

[Kyaa-dost]

@anawishnoff @RBrid can we please look into this whenever get a chance ⬆️