We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Data grid column colors

Thread ID:

Created:

Updated:

Platform:

Replies:

132581 Sep 10,2017 07:26 AM Sep 12,2017 01:10 AM Xamarin.Forms 3
loading
Tags: SfDataGrid
DukeMeister
Asked On September 10, 2017 07:26 AM

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 [Syncfusion]
Replied On September 11, 2017 03:29 AM

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; 
    } 
} 
 
 
 
Regard, 
Ashok  


DukeMeister
Replied On September 11, 2017 10:38 AM

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 [Syncfusion]
Replied On September 12, 2017 01:10 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;