Articles in this section
Category / Section

How to customize the Foreground color for cells in a column based on the cell content in Xamarin.iOS DataGrid?

2 mins read

SfDataGrid displays all the text values in GridCells with a default Foreground color of RGB values 51. However SfDataGrid allows you to customize the Foreground color of the GridCells for the entire view and also to some specific cells based on conditions. 

To change the Foreground color of the GridCells for the entire view, you can use the SfDataGrid.GridStyle property and set the custom style to change the foreground color. For more details please refer our user documentation in the below link.

https://help.syncfusion.com/xamarin-ios/sfdatagrid/styles

In case, if your requirement is to change the Foreground color based on the cell value, then you can achieve this by creating custom GridCell derived from GridCell in SfDataGrid.

Refer the below code example for loading views inside the GridCell to customize its Foreground color based on cell value. The foreground of the GridCells of the Percentage column are applied with red color for values < 50 and green color for values > 50.

ViewController.cs

public partial class ViewController : UIViewController
{
   SfDataGrid grid=new SfDataGrid();
   ViewModel viewmodel= new ViewModel();
   
   public override void ViewDidLoad ()
   {
      base.ViewDidLoad ();
      grid.ItemsSource=viewmodel.Info;
      //Creation of template column
      var textcolumn2 = new GridTextColumn 
      {        
         UserCellType = typeof(CustomCell), //Loading a custom cell into the template column
         MappingName = "Percentage",
      };
      grid.Columns.Add (textcolumn2);
      View.AddSubview (grid); 
   }  
   
   public override void ViewDidLayoutSubviews ()  
   {   
      this.grid.Frame = new CGRect (0, 20, View.Frame.Width, View.Frame.Height);
      base.ViewDidLayoutSubviews ();
   }
}

 

CustomCell.cs

public class CustomCell:GridCell
{
   private UILabel label;
   
   public CustomCell ()
   {
      label = new UILabel ();
      this.AddSubview(label);
   }
   
   public override void LayoutSubviews ()
   {
      label.Frame =new CGRect(35,0,this.Frame.Width,this.Frame.Height) ;  
      label.Text =DataColumn.FormattedCellvalue;   
      if (label.Text != "" && Convert.ToInt32 (label.Text) < 50)
           label.TextColor = UIColor.Red;
      else
           label.TextColor = UIColor.Green;
           base.LayoutSubviews ();
   }
   
   protected override void UnLoad ()
   {
      this.RemoveFromSuperview ();
   }
}

 

Refer the following screenshot for the final outcome upon execution of the above code

Final Outcome

The working sample for this KB is available in the following location.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CellForeground1672404492


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied