UWP Datepicker in datagrid deselects as soon as selecting

Lettuce 121 Reputation points
2021-09-21T23:31:19.783+00:00

Hello,

I'm trying to add a DatePicker to my DataGrid from the Microsoft.Toolkil.Uwp.Ui.Controls.DataGrid package.

The user is unable to change the date, because I think the DatePicker triggers CellEditEnding event when you try to change the date, this causes the DatePickerFlyout to go away as soon as you click on it.

MainPage.xaml:

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

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">
        </Grid>
        <Grid Grid.Column="1">
            <controls:DataGrid x:Name="MyGrid" Margin="20,50,20,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" SelectionMode="Single"
        AutoGenerateColumns="False" ColumnWidth="Auto" CanUserSortColumns="True" AlternatingRowBackground="LightCyan" CanUserReorderColumns="False">
                <controls:DataGrid.Columns>
                    <controls:DataGridTemplateColumn Header="Date" CanUserSort="True" SortDirection="Descending">
                        <controls:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <DatePicker Date="{Binding DateTimeGrid}" />
                            </DataTemplate>
                        </controls:DataGridTemplateColumn.CellTemplate>
                    </controls:DataGridTemplateColumn>
                    <controls:DataGridTextColumn 
             Header="Description" 
             CanUserSort="True"
             Binding="{Binding SampleText}"/>
                </controls:DataGrid.Columns>
            </controls:DataGrid>
        </Grid>
    </Grid>
</Page>

MainPage.xaml.cs:

private ObservableCollection<SampleEntity> SampleList = new ObservableCollection<SampleEntity>();

        public MainPage()
        {
            this.InitializeComponent();
            var sampleOne = new SampleEntity();
            sampleOne.DateTimeGrid = DateTimeOffset.Now;
            sampleOne.SampleText = "Test 1";
            SampleList.Add(sampleOne);

            var sampleTwo = new SampleEntity();
            sampleTwo.DateTimeGrid = DateTimeOffset.Now;
            sampleTwo.SampleText = "Test 2";
            SampleList.Add(sampleTwo);

            MyGrid.ItemsSource = SampleList;
        }

SampleEntity.cs:

public class SampleEntity
{
    public DateTimeOffset DateTimeGrid { get; set; }
    public string SampleText { get; set; }
}
Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,861 Reputation points
    2021-09-22T06:21:38.96+00:00

    Hello, Welcome to Micorosoft Q&A,

    because I think the DatePicker triggers CellEditEnding event when you try to change the date, this causes the DatePickerFlyout to go away as soon as you click on it.

    You are right, you can set CellEditingTemplate to verify this, when you click the datepicker, the cell will turn into editing model accidentally.

    For solve this problem, we suggest you disable CellEdit model by setting IsReadOnly="True" for DataGridTemplateColumn.

    <controls:DataGridTemplateColumn  
            CanUserSort="True"  
            Header="Date"  
            IsReadOnly="True"  
            SortDirection="Descending">  
            <controls:DataGridTemplateColumn.CellTemplate>  
                <DataTemplate>  
                    <DatePicker Date="{Binding DateTimeGrid}" />  
                </DataTemplate>  
            </controls:DataGridTemplateColumn.CellTemplate>  
    

    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful