Syncfusion SfDataGrid Change foreground of cell based on value

Question

I am attempting to change the foreground of a cell based on the DateTime value from an object in the ItemsSource using a converter.

The issue that I am having is that when running the application I get an exception of 'GridCell' TargetType does not match type of element 'GridCell'.

The exception doesn't seem to make any sense since a GridCell TargetType is exactly the same as a GridCell element. I would greatly appreciate it if someone could point out what I am doing wrong. The code is below.

Model used in generating the ItemsSource (code behind creates a List. This all works fine)

public class RelationalTable 
{
    public int ClaimNumber { get; set; }
    public DateTime PlanPosted { get; set; }
    public DateTime PlanDue { get; set; }
    public int PlanVersion { get; set; }
    public string Department { get; set; }
}

SfDataGrid markup:

<UserControl.Resources>
<!-- converter is defined in the UserControl header xmlns:converter=<assembly holding the converter code> -->
    <converter:StyleConverterByDate x:Key="ConverterResult" />
</UserControl.Resources>

        <sf:SfDataGrid x:Name="SfGrid" ItemsSource="{Binding ClaimList}" AutoGenerateColumns="False"
                       IsReadOnly="True" AllowSorting="True" AllowFiltering="True"
                       FontFamily="{StaticResource AppFont}"
                       AllowEditing="False" AllowTriStateSorting="True" ColumnSizer="AutoWithLastColumnFill"
                       RowHeight="32">

            <i:Interaction.Behaviors>
                <loc:SfDataGridBehavior />
            </i:Interaction.Behaviors>
            <sf:SfDataGrid.Columns>
                <sf:GridTextColumn HeaderText="Claim Number"
                                   HorizontalHeaderContentAlignment="Left"
                                   MappingName="ClaimNumber">
                </sf:GridTextColumn>
                <sf:GridDateTimeColumn CustomPattern="MM/dd/yyyy"
                                       HorizontalHeaderContentAlignment="Left"
                                       HeaderText="Date Posted"
                                       MappingName="PlanPosted"
                                       Pattern="CustomPattern" />
                <sf:GridDateTimeColumn CustomPattern="MM/dd/yyyy"
                                       HorizontalHeaderContentAlignment="Left"
                                       HeaderText="Date Due"
                                       MappingName="PlanDue"
                                       Pattern="CustomPattern">


                    <sf:GridDateTimeColumn.CellStyle>
                        <Style TargetType="sf:GridCell">
                            <Setter Property="Foreground" Value="{Binding PlanDue, Converter={StaticResource ConverterResult}}" />
                        </Style>
                    </sf:GridDateTimeColumn.CellStyle>



                </sf:GridDateTimeColumn>
                    
                <sf:GridTextColumn HeaderText="Department"
                                   HorizontalHeaderContentAlignment="Left"
                                   MappingName="Department" />

            </sf:SfDataGrid.Columns>
        </sf:SfDataGrid>

And finally the converter

public class StyleConverterByDate : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        DateTime _value = (DateTime)value;
        DateTime _today = DateTime.Today;

        if (_value.Date >= _today.Date)
            return new SolidColorBrush(Colors.Red);
  
        if (_value.Date > _today.Date.AddDays(-10) && _value.Date < _today.Date)
            return new SolidColorBrush(Colors.Yellow);

        return new SolidColorBrush(Colors.Black);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new SolidColorBrush(Colors.Black);
    }
}

Answer 1

I found the solution. I replaced the CellStyle with a CellTemplate and used a TextBlock inside a DataTemplate to display the cell data.

<sf:GridDateTimeColumn.CellTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding PlanDue, StringFormat=MM/dd/yyyy}"
                   Foreground="{Binding PlanDue, Converter={StaticResource StyleConverter}}"
                   VerticalAlignment="Center"
                   FontFamily="{StaticResource AppFont}"
                   FontWeight="DemiBold"/>
    </DataTemplate>
</sf:GridDateTimeColumn.CellTemplate>

The foreground color of the Date in the GridDateTimeColumn now changes at runtime based on the condition met in the converter.

Hope this helps someone else because I was stumped for a while on this one.

Answer 2

I suspect that your reported exception is arising because there is a conflict with the "GridCell" class existing in both Syncfusion.SfGrid.WPF and Syncfusion.Grid.WPF DLLs.

This conflict results in an exception where the Style Property ‘Foreground’ cannot be found in the type reference when you reference http://schemas.Syncfusion.com/wpf in your project.

To fix this issue, you can explicitly declare the namespace for "GridCell" by specifying the assembly in the following way:

xmlns:sfdatagrid="clr-namespace:Syncfusion.UI.Xaml.Grid;assembly=Syncfusion.SfGrid.WPF"

Code snippet :

<UserControl x:Class="SfDataGrid_Demo.MyUserControl"

         xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

         xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

         xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006

         xmlns:d=http://schemas.microsoft.com/expression/blend/2008

         xmlns:syncfusion=http://schemas.syncfusion.com/wpf

         xmlns:sfdatagrid="clr-namespace:Syncfusion.UI.Xaml.Grid;assembly=Syncfusion.SfGrid.WPF"

         xmlns:local="clr-namespace:SfDataGrid_Demo"

         mc:Ignorable="d"

         d:DesignHeight="450" d:DesignWidth="800">

<UserControl.DataContext>

    <local:ViewModel/>

</UserControl.DataContext>

<UserControl.Resources>

    <local:StyleConverterByDate x:Key="ConverterResult"/>

</UserControl.Resources>



<Grid x:Name="Root_Grid">

    <Grid.RowDefinitions>

        <RowDefinition Height="*"/>

        <RowDefinition Height="*"/>

   </Grid.RowDefinitions>

    <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}" AllowSorting="True"  SelectionMode="Extended" AllowEditing="True" AllowTriStateSor

        <syncfusion:SfDataGrid.Columns>

            <syncfusion:GridDateTimeColumn CustomPattern="MM/dd/yyyy"

                                 HorizontalHeaderContentAlignment="Left"

                                 HeaderText="Date Due"

                                 MappingName="Date"

                                 Pattern="CustomPattern">

                <syncfusion:GridDateTimeColumn.CellStyle>

                    <Style TargetType="sfdatagrid:GridCell">

                        <Setter Property="Foreground" Value="{Binding Date, Converter={StaticResource ConverterResult}}" />

                    </Style>

                </syncfusion:GridDateTimeColumn.CellStyle>

            </syncfusion:GridDateTimeColumn>

        </syncfusion:SfDataGrid.Columns>

    </syncfusion:SfDataGrid>

</Grid>

For more information related to ambiguous type reference exceptions, please refer to the below knowledge base documentation link,

KB Link: https://www.syncfusion.com/kb/5712/how-to-resolve-ambiguous-type-reference-exception