RadGridView/GridViewDataColumn bound to DateTime Property: Cell Area is Whitespace with Office2019 Theme

2 Answers 33 Views
DateTimePicker GridView
Jens
Top achievements
Rank 1
Jens asked on 09 Dec 2021, 05:26 PM | edited on 09 Dec 2021, 10:17 PM

I created a simple grid with a GridViewDataColumn bound to a DateTime property.

        <telerik:GridViewDataColumn DataMemberBinding="{Binding Date}" DataFormatString="{} {0:dd.MM.yyyy}"/>

Using Office2019 Theme (NoXaml packages), when the picker area is expanded, cell area is empty, no current date value visible while modifying the picker:

It seems to be "white on white", this appears when you select the cell areas where the date parts should be located:

The date shows up as expected after leaving the cell.

Switching to Office2016 Theme, everything is fine:

This might be an issue with the specific Theme

Thanks,

Jens


2 Answers, 1 is accepted

Sort by
0
Accepted
Masha
Telerik team
answered on 17 Dec 2021, 08:23 AM

Hello Jens,

Thank you for the code snippet, it helps me to reproduce the issue on my side. The problem occurs because the resource dictionaries are merged in the scope of RadGridVIew. That's why the foreground of DateTimePicker is overridden from the trigger from the RadGridViewRow style. In order to fix it you can do one of the following steps:

1. Merged resources in App.xaml (recommended)

2. You can create Editor Style inside your GridViewDataColumn and set the desired Foreground there:

 <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" DataFormatString="{} {0:dd.MM.yyyy}">
                    <telerik:GridViewDataColumn.EditorStyle>
                        <Style TargetType="telerik:RadDatePicker" BasedOn="{StaticResource RadDateTimePickerStyle}">
                            <Setter Property="Foreground" Value="{telerik:Office2019Resource ResourceKey=MainForegroundBrush}" />
                        </Style>
                    </telerik:GridViewDataColumn.EditorStyle>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

I hope this helps.

Regards,
Masha
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Masha
Telerik team
answered on 10 Dec 2021, 02:11 PM

Hi Jens,

I am afraid that I am unable to replicate this on my end. Can you share more details of your scenario? 
Do you have any custom styles in your project? I was testing with the following RadGridView properties:

<telerik:RadGridView 
    ItemsSource="{Binding Clubs}"
    AutoGenerateColumns="False"
    GroupRenderMode="Flat"
    SelectionMode="Extended"
    EnableLostFocusSelectedState="False"
    IsSynchronizedWithCurrentItem="False"
    Margin="5">
    <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                            Header="Est." 
                            DataFormatString="{}{0:yyyy}"/>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" 
                            Header="Stadium" 
                            DataFormatString="{}{0:N0}"/>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" DataFormatString="{} {0:dd.MM.yyyy}"/>
                    </telerik:RadGridView.Columns>
</telerik:RadGridView>

I am looking forward to your reply.

Regards,
Masha
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jens
Top achievements
Rank 1
commented on 16 Dec 2021, 04:00 PM | edited

Hi Masha,

I set up a new WPF (.NET-Framework) project in VS (not using Telerik templates). Then I added the nuget packages by command line resulting into following packages.xml (all NoXaml, project must reference only assemblies downloaded from nuget service):

<?xml version="1.0" encoding="utf-8"?>
<packages> <package id="Telerik.Windows.Controls.for.Wpf" version="2021.3.1109" targetFramework="net48" /> <package id="Telerik.Windows.Controls.GridView.for.Wpf" version="2021.3.1109" targetFramework="net48" /> <package id="Telerik.Windows.Controls.Input.for.Wpf" version="2021.3.1109" targetFramework="net48" /> <package id="Telerik.Windows.Data.for.Wpf" version="2021.3.1109" targetFramework="net48" /> <package id="Telerik.Windows.Themes.Office2019.for.Wpf" version="2021.3.1109" targetFramework="net48" /> </packages>


Simple radGridView with DateTime column and Office2019 Themes

    <telerik:RadGridView Name="RadDataGrid" 
                       DataContext="{StaticResource MyViewModel}"
                       ItemsSource="{Binding Items}" AutoGenerateColumns="False">

      <telerik:RadGridView.Resources>
        <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/System.Windows.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>
          </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
      </telerik:RadGridView.Resources>
      <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Date}" DataFormatString="{} {0:dd.MM.yyyy}"/>

 

When I replace the NoXaml packages with .Xaml package, the issue does not occur.

 

Tags
DateTimePicker GridView
Asked by
Jens
Top achievements
Rank 1
Answers by
Masha
Telerik team
Share this question
or