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.

Column and Row BackgroundColor

Thread ID:

Created:

Updated:

Platform:

Replies:

129323 Mar 13,2017 03:06 AM Mar 17,2017 09:27 AM Xamarin.Forms 3
loading
Tags: SfDataGrid
Assem Hakmeh
Asked On March 13, 2017 03:06 AM

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 [Syncfusion]
Replied On March 14, 2017 01:37 AM

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
Replied On March 16, 2017 02:43 AM

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 [Syncfusion]
Replied On March 17, 2017 09:27 AM

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 
 
 
 


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.

;