Skip to content
This repository has been archived by the owner on May 29, 2024. It is now read-only.

Set cell background color based on API response #144

Open
SergeyChtcherbakov opened this issue Oct 8, 2020 · 0 comments
Open

Set cell background color based on API response #144

SergeyChtcherbakov opened this issue Oct 8, 2020 · 0 comments

Comments

@SergeyChtcherbakov
Copy link

I have DataGrid in Xaml

<ScrollView 
                            Orientation="Horizontal" 
                            HorizontalOptions="FillAndExpand" 
                            VerticalOptions="FillAndExpand"
                            Margin="15,0,15,0"
                            VerticalScrollBarVisibility="Never">
                            <dg:DataGrid
                                x:Name="SampleGrid"
                                ItemsSource="{Binding SampleResults}"
                                HeaderHeight="50"
                                RowHeight="70"
                                BorderColor="#CCCCCC"
                                HeaderBackground="{StaticResource AccentColor}"
                                HeaderTextColor="{StaticResource BaseTextColor}"
                                HorizontalOptions="CenterAndExpand">
                                <dg:DataGrid.HeaderFontSize>
                                    <OnIdiom  x:TypeArguments="x:Double">
                                        <OnIdiom.Tablet>15</OnIdiom.Tablet>
                                        <OnIdiom.Phone>13</OnIdiom.Phone>
                                    </OnIdiom>
                                </dg:DataGrid.HeaderFontSize>
                                <dg:DataGrid.RowsBackgroundColorPalette>
                                    <dg:PaletteCollection >
                                        <Color>#F2F2F2</Color>
                                        <Color>#FFFFFF</Color>
                                    </dg:PaletteCollection>
                                </dg:DataGrid.RowsBackgroundColorPalette>
                            </dg:DataGrid>
                        </ScrollView>

I want to be able to set the background color dynamically based on API response. Columns are also dynamic.

// add columns to data grid
                    foreach (var column in uniqueColumns)
                    {
                        colCollection.Add(new DataGridColumn
                        {
                            Title = column,
                            PropertyName = $"Prop{uniqueColumns.IndexOf(column) + 1}",
                            Width = 100,
                            CellTemplate = new DataTemplate(() =>
                            {
                                return new ContentView
                                {
                                    HorizontalOptions = LayoutOptions.Fill,
                                    VerticalOptions = LayoutOptions.Fill,
                                    Content = new Label 
                                    { 
                                        TextColor = Color.Black
                                    }.Bind(Label.TextProperty, $"Prop{uniqueColumns.IndexOf(column) + 1}")
                                }.Bind(ContentView.BackgroundColorProperty, $"Prop{uniqueColumns.IndexOf(column) + 1}Colour", BindingMode.Default, new HexToColorConverter());
                            })
                        });
                    }

                    sampleGrid.Columns = colCollection;

I've set the flag Forms.SetFlags("Markup_Experimental"); to Bind like this. I tried Grid instead of ContentView but nothing works.

In my understanding, the code above is the same if I use cell CellTemplate in XAML as in the example. But it won't work.

<dg:DataGridColumn Title="Streak" PropertyName="Streak" Width="0.7*">
          <dg:DataGridColumn.CellTemplate>
            <DataTemplate>
              <ContentView HorizontalOptions="Fill" VerticalOptions="Fill" 
                           BackgroundColor="{Binding Streak,Converter={StaticResource StreakToColorConverter}}">
                <Label Text="{Binding Streak}" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black"/>
              </ContentView>
            </DataTemplate>
          </dg:DataGridColumn.CellTemplate>
        </dg:DataGridColumn>

Any help appreciated.
The values of the data I set using reflection, as all columns are dynamic.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant