Column and Row BackgroundColor

[Assem Hakmeh]

Hi There,

I need a way to set the BackgroundColor for a Column and also for Rows.

Basically some columns will have a fixed background color for the life of the grid. For the rows, some rows need to have a specific color set based on some value in the row data. 

I can't seem to find a way to do either. I would appreciate any input on the matter.

Thanks,

[Vimal Prabhu Manohkaran]

Hi Assem,

Thanks for contacting Syncfusion support. Your requirement can be achieved by writing converters to the GridColumn.CellStyle property. Please refer the below code snippet. In the below code snippet, as per your query, we have assumed that the first column will have a background color value of Color.Navy for the life of the grid and the other columns will have the default background color for the life of the grid.

 

<ContentPage.Resources> 

    <ResourceDictionary> 

      //Converter declaration 

      <local:CustomGridCell x:Key="customGridCell" /> 

    </ResourceDictionary> 

  </ContentPage.Resources> 

 

//First column declaration and converter initialization 

<sfgrid:GridTextColumn MappingName="OrderID"> 

  <sfgrid:GridTextColumn.CellStyle> 

    <Style TargetType="sfgrid:GridCell"> 

      <Setter Property="BackgroundColor" Value="{Binding .,Converter={StaticResource customGridCell}}" /> 

    </Style> 

  </sfgrid:GridTextColumn.CellStyle> 

</sfgrid:GridTextColumn> 

CustomConverter 

public class CustomGridCell : IValueConverter 

{ 

    public CustomGridCell() 

    { 

    } 

 

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

    { 

        var rowData = value as OrderInfo; 

        if (rowData.OrderID < 100 && rowData.CustomerID > 150) 

            // Row color based on value 

            return Color.Olive; 

        else 

            //Fixed column background color for life 

            return Color.Navy; 

    } 

 

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

    { 

        throw new NotImplementedException(); 

    } 

} 

Hence by writing converters to all your columns, you can achieve your requirement. We have prepared a sample based on your query and you can find the sample from the below link.

Sample Link : http://www.syncfusion.com/downloads/support/forum/129323/ze/129323814046337

For more information on conditional styling, please refer the below UG link.

UG link : https://help.syncfusion.com/xamarin/sfdatagrid/conditional-styles

Regards,
Vimal Prabhu 

 

[Assem Hakmeh]

Thank you for the code sample. The only issue with this approach is that the cell color overrides the selection color. So we need a way to account for the selected item in a away that updates when the selection changes. Any ideas?

[Suhasini Suresh]

Hi Assem Hakmeh, 

At present, SfDataGrid does not provide support for your requirement. This is because, when a row is selected the selection will be applied to the row panel. However, when you write style for a cell the background color of the grid cells will be updated. Since the grid cells are higher in the view hierarchy it will obviously hide the selection color applied to the row panel. This is the behavior of the SfDataGrid.  

However, we have achieved your requirement from the sample level to make the background of the cells that is applied with CellStyle as transparent when a row is selected and have modified the converter codes accordingly. Refer the below code example for further details.  

Work around: 

You need to set the GridTextColumn.LoadUIView as “true”. 

<sfgrid:GridTextColumn MappingName="OrderID" LoadUIView="True"> 

        <sfgrid:GridTextColumn.CellStyle> 

          <Style TargetType="sfgrid:GridCell"> 

            <Setter Property="BackgroundColor" Value="{Binding .,Converter={StaticResource customGridCell}, ConverterParameter={x:Reference dataGrid}}" /> 

          </Style> 

        </sfgrid:GridTextColumn.CellStyle> 

      </sfgrid:GridTextColumn> 

 

public Page1() 

{ 

            InitializeComponent(); 

            dataGrid.CellRenderers.Remove("TextView"); 

            dataGrid.CellRenderers.Add("TextView", new CustomGridCellTextViewRenderer()); 

 } 

 

public class CustomGridCellTextViewRenderer : GridCellTextViewRenderer 

    { 

        public override void OnUpdateDisplayValue(DataColumnBase dataColumn, SfLabel view) 

        { 

            base.OnUpdateDisplayValue(dataColumn, view); 

            if (view!= null && view.Parent != null) 

                (view.Parent as CellElement).Style = null; 

        } 

 

        protected override void OnUpdateCellStyle(DataColumnBase dataColumn) 

        { 

            base.OnUpdateCellStyle(dataColumn); 

            dataColumn.UpdateColumn(dataColumn.RowData, true); 

        } 

    } 

 

The implementation of the converter class is below. 

public class CustomGridCell : IValueConverter 

    { 

        public CustomGridCell() 

        { 

        } 

 

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

        { 

            var rowData = value as OrderInfo; 

            var dataGrid = parameter as SfDataGrid; 

            var selectedRow = dataGrid.SelectedItem; 

            if (rowData.OrderID < 100 && rowData.CustomerID > 150) 

            { 

                if ((selectedRow != null) && (selectedRow == rowData)) 

                    // Apply selection color when the row is selected 

                    return Color.Transparent; 

                else 

                    // Row color based on value 

                    return Color.Olive; 

            } 

            else 

            { 

                if ((selectedRow != null) && (selectedRow == rowData)) 

                    // Apply selection color when the row is selected 

                    return Color.Transparent; 

                else 

                    //Fixed background color for life 

                    return Color.Navy; 

            } 

        } 

 

This work around is particularly to achieve your requirement and cannot be considered internally as default behavior. 

We have modified the sample to meet your requirements and you can download the same from the below link. 

http://www.syncfusion.com/downloads/support/forum/129323/ze/129323-121173974 

Regards, 

Suhasini P S