Change foreground of cell based on value

[Timothy D Jones]

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

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

Which doesn't make sense at all. I would greatly appreciate it if someone could point out what I am doing wrong. The code is below.

Model for the ItemsSource 

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; }
    }

Here is the markup for the SfDataGrid


<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:GridTemplateColumn HeaderText="Actions"
                               HorizontalHeaderContentAlignment="Left">
            <sf:GridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <lc:ButtonExt ButtonType="NoText"
                                      IconImage="{iconPacks:UniconsImage Brush=White, Kind=Edit}"
                                      Tag="{Binding Id}" Style="{StaticResource GridButtonSize}"
                                      ToolTip="Edit" x:Name="EditBtn" Click="EditAP_Click" />
                        <lc:ButtonExt ButtonType="NoText"
                                      IconImage="{iconPacks:UniconsImage Brush=White, Kind=Eye}"
                                      Tag="{Binding Id}" Margin="3 0 0 0"
                                      Style="{StaticResource GridButtonSize}" ToolTip="View"
                                      x:Name="ViewBtn" Click="ViewAP_Click" />
                        <lc:ButtonExt ButtonType="NoText"
                                      IconImage="{iconPacks:MaterialImage Brush=White, Kind=Printer}"
                                      Style="{StaticResource GridButtonSize}" Margin="3 0 0 0"
                                      Tag="{Binding Id}" ToolTip="Print to PDF"
                                      x:Name="PrintBtn" Click="PrintAP_Click" />
                        <lc:ButtonExt ButtonType="NoText"
                                      IconImage="{iconPacks:UniconsImage Brush=White, Kind=TrashAlt}"
                                      Tag="{Binding Id}" Style="{StaticResource GridButtonSize}"
                                      Margin="3 0 0 0" RedBtn="True" Background="#E81123" ToolTip="Delete"
                                      x:Name="DeleteBtn" Click="DeleteAP_Click" />
                    </StackPanel>
                </DataTemplate>
            </sf:GridTemplateColumn.CellTemplate>
        </sf:GridTemplateColumn>
    </sf:SfDataGrid.Columns>
    <sf:SfDataGrid.RecordContextMenu>
        <ContextMenu>
            <MenuItem Header="Edit" Click="EditMenuItem_Click">
                <MenuItem.Icon>
                    <iconPacks:Unicons Kind="Edit" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="View" Click="ViewMenuItem_Click">
                <MenuItem.Icon>
                    <iconPacks:Unicons Kind="Eye" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Print to PDF" Click="PrintMenuItem_Click">
                <MenuItem.Icon>
                    <iconPacks:Material Kind="Printer" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Delete" Click="DeleteMenuItem_Click">
                <MenuItem.Icon>
                    <iconPacks:Unicons Kind="TrashAlt" />
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
    </sf:SfDataGrid.RecordContextMenu>
</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 Color.Red;

            if (_value.Date > _today.Date.AddDays(-10) && _value.Date < _today.Date)
                return Color.Yellow;

            return Color.Black;
        }


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

[Timothy D Jones]

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 change 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.

[Chidanand Murugaiah]

Hi Timothy D Jones,

We appreciate your help, which included the query and its solution. If you need further assistance, please don't hesitate to ask. We're always here to help.

Regards,

Chidanand M