Data grid column colors

[DukeMeister]

I'm trying to get a column colored by its bound data, as per the example from the docs (see below). I'm having trouble understanding how the binding to Freight works in this example. I've tried the below XAML, just changing Freight to my property. I get all the column cells colored Red, all of the time. And the intellisense says "Cannot resolve symbol". How do I give it the correct BindingContext?

<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="low" >
            <Label Text="{Binding Freight}"
                   TextColor="White" 
                   BackgroundColor="Red" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </DataTemplate>
        <DataTemplate x:Key="average" >
            <Label Text="{Binding Freight}"
                   TextColor="Black" 
                   BackgroundColor="Yellow" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </DataTemplate>
        <DataTemplate x:Key="high" >
            <Label Text="{Binding Freight}" 
                   TextColor="White" 
                   BackgroundColor="Green" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </DataTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

[Ashok N]

Hi Tino, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement with IValueConverter. Using this IValueConverter we can able to set the condition style to GridColumn. We have prepared the sample by setting condition style based on the binding MappingName. Please refer the below code example for more details. 

 

//Resource file 

<ContentPage.Resources> 

    <ResourceDictionary> 

        <local:StyleConverter x:Key="Textcolor"/> 

        <local:BackgroundColorConverter x:Key="Backgroundcolor"/> 

    </ResourceDictionary> 

</ContentPage.Resources> 

 

// GridTextColumn 

 

<sfgrid:SfDataGrid.Columns> 

    <sfgrid:GridTextColumn HeaderText="Order ID" MappingName="OrderID"> 

        <sfgrid:GridTextColumn.CellStyle> 

            <Style TargetType="sfgrid:GridCell"> 

                <Setter Property="BackgroundColor" Value="{Binding OrderID,  

                    Converter={StaticResource Backgroundcolor}}" /> 

                <Setter Property="Foreground" Value="{Binding OrderID,  

                    Converter={StaticResource Textcolor}}" /> 

            </Style> 

        </sfgrid:GridTextColumn.CellStyle> 

    </sfgrid:GridTextColumn> 

 

//GridTemplateColumn 

 

    <sfgrid:GridTemplateColumn MappingName="CustomerID"> 

        <sfgrid:GridTemplateColumn.CellTemplate> 

            <DataTemplate> 

                <StackLayout> 

                    <Label Text="{Binding OrderID}" TextColor="{Binding OrderID,  

                    Converter={StaticResource Textcolor}}" BackgroundColor="{Binding OrderID,  

                    Converter={StaticResource Backgroundcolor}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  /> 

                </StackLayout> 

            </DataTemplate> 

        </sfgrid:GridTemplateColumn.CellTemplate> 

    </sfgrid:GridTemplateColumn> 

</sfgrid:SfDataGrid.Columns> 

 

// IValueConverter Class 

 

public class StyleConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 

    { 

        int _value = (int)value; 

        if (_value % 2 == 0) 

            return Color.Green; 

        return Color.Red; 

    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 

    { 

        return value; 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/forum/132581/ze/XamarinForms1391398190  

 

KB link: https://www.syncfusion.com/kb/7126/how-to-customize-the-foreground-color-for-cells-in-a-column-based-on-the-cell-content-from-code  

 

Regard, 

Ashok  

[DukeMeister]

Thanks. It didn't answer my question about the binding, but I did get this to work based on your sample. I was using autogenerating columns but converted to manual creation in XAML, and added the other bits, and it's working ok. 

Strangely, Intellisense shows the binding (OrderID in the sample below) as unknown, but it still works.. maybe the other method would've worked after all. Anyway it's fine now.

<Setter Property="BackgroundColor" Value="{Binding OrderID, Converter={StaticResource Backgroundcolor}}" /> 

[Ashok N]

Hi Tino, 

 

Thanks for your reply.  

 

In your code example Freight is model object, not ViewModel property (not a property of given BindingContext class). We can able to Binding the properties to View from given  ContentPage.BindingContext class(ViewModel.cs). So while binding model object to View, it throws "Cannot resolve symbol" error. We have Binding OrderID in Setter and it was Binding ItemsSource collection model property and while columns creating the values will be set to GridColumn so it will working.  

 

Please let us know if you require further assistance on this.  

 

Regards, 

Ashok