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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. Column and Row BackgroundColor

Column and Row BackgroundColor

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,

3 Replies
VP Vimal Prabhu Manohkaran Syncfusion Team March 14, 2017 05:37 AM UTC

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 
 


AH Assem Hakmeh March 16, 2017 06:43 AM UTC

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?

SS Suhasini  Suresh Syncfusion Team March 17, 2017 01:27 PM UTC

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. 
Regards, 
Suhasini P S 
 
 
 


Loader.
Up arrow icon