Articles in this section
Category / Section

How to change the background color for editing cell

2 mins read

SfDataGrid allows you to customize the background color for editing cell by customizing the cell renderer associated to the edited grid cell.

Refer the below code example in which GridCellNumericRenderer is customized and the OnInitializeEditView method is overridden to customize the background color of the editing cell.

NumericColumnRenderer

public class NumericColumnRenderer : GridCellNumericRenderer
{
       public NumericColumnRenderer()
       {
 
        }
 
       public override void OnInitializeEditView(DataColumnBase dataColumn, SFNumericTextBox view)
       {
            base.OnInitializeEditView(dataColumn, view);
            view.BackgroundColor = UIColor.Cyan;
       }
}

 

MyViewController:

In MyViewController, the existing GridCellNumericRenderer has to be removed from SfDataGrid.CellRenderers collection and the customized NumericCellRenderer has to be added to the CellRenderer collection.

public class MyViewController:UIViewController
{
      SfDataGrid dataGrid;
      ViewModel viewModel;
      public MyViewController()
      {
            dataGrid = new SfDataGrid();
            viewModel = new ViewModel();
      }
 
      public override void ViewDidLoad()
      {
            base.ViewDidLoad();
            this.View.BackgroundColor = UIColor.White;
            dataGrid.ItemsSource = viewModel.OrdersInfo;
            dataGrid.AutoGenerateColumns = false;
            dataGrid.AllowEditing = true;
            dataGrid.EditTapAction = TapAction.OnTap;
            dataGrid.CellRenderers.Remove("Numeric");
            dataGrid.CellRenderers.Add("Numeric", new NumericColumnRenderer());
            var numericColumn = new GridNumericColumn();
            numericColumn.MappingName = "OrderID";
            numericColumn.AllowEditing = true;
            dataGrid.Columns.Add(numericColumn);
 
            this.View.AddSubview(dataGrid);
      }
      public override void ViewDidLayoutSubviews()
      {
            dataGrid.Frame = new CGRect(0, 50, View.Frame.Width, View.Frame.Height - 20);
            base.ViewDidLayoutSubviews();
      }
}

 

Screenshot:

C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCache\Content.Word\EditingCell.png      

Sample Link: How to change the background color for editing cell?

 

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