Cell text colour based on cell value

[Neil N]

We're looking for a straightforward way to set the text colour of a cell based on the value of a cell.  The markup below gives: Error: Position 79:32. No property, bindable property, or event found for 'TextColor', or mismatching type between value and property.

Will CellContentStyleSelector work and is that the only option?

 

<telerikDataGrid:DataGridNumericalColumn
    PropertyName="EmployeeRating"
    HeaderText="Rating">
    <telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
        <telerikDataGrid:DataGridTextCellStyle
           TextColor="{Binding EmployeeRatingTextColor}"
           SelectedTextColor="Black"
           FontSize="15" />
    </telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
</telerikDataGrid:DataGridNumericalColumn>

[Neil N]

I should add - we want to keep the filter functionality so using template columns is a non-starter.

[Lance | Manager Technical Support]

Hi Neil,

The reason for that error is because TextColor is not a Xamarin.Forms BindableProperty (aka DependencyProperty if you're familiar with WPF/UWP).

In the past 2 releases, we have made CellTemplates and CellEditTemplates available for data columns. I believe that is the solution to your goal, see DataGrid Columns Cell Template.

Example

As a quick example, I thought I'd show you both direct data binding and DataTrigger usage.

<telerikGrid:DataGridTextColumn PropertyName="Name">
    <telerikGrid:DataGridTextColumn.CellContentTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}"
                        TextColor="{Binding BadgeColor}"
                        LineBreakMode="TailTruncation"
                        VerticalOptions="Center">
                <Label.Triggers>
                    <DataTrigger TargetType="Label"  Binding="{Binding IsAbsent}"  Value="True">
                        <Setter Property="FontAttributes"  Value="Bold" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
        </DataTemplate>
    </telerikGrid:DataGridTextColumn.CellContentTemplate>
</telerikGrid:DataGridTextColumn>

Here's the result at runtime:

The items sources was generated with the following:

var sampleData = Enumerable.Range(1, 20).Select(i => new Student
{
    Name = $"Student {i}",
    BadgeColor = Color.FromRgb(i * i, i * 5, i * 10),
    IsAbsent = i % 3 == 0
});

foreach (var student in sampleData)
{
    Students.Add(student);
}

Wrapping Up

If I was able to answer your question, you can let me know by using the ticket's "Mark as resolved" button (in the email or ticket page). If you have any trouble with this, reply back with the code so I can take a closer look.

Thank you for contacting Support and for using UI for Xamarin for your projects!

Regards,
Lance | Manager Technical Support
Progress Telerik

[Neil N]

Works great. Thank you!