How to display RowIndex at RowHeaderCell in SfDataGrid?

2 mins read

RowHeader can be enabled by setting “SfDataGrid.ShowRowHeader” as true. To display row index in RowHeaderCell you need to customize the GridRowHeaderCellRenderer and replace it in the “SfDataGrid.CellRenderers” collection.

Refer the below code example to create a new customized renderer for RowHeader and replace it in the cell renderers collection of SfDataGrid.

public MyViewController()
{
    dataGrid = new SfDataGrid();
    viewModel = new ViewModel();
    dataGrid.ItemsSource = viewModel.OrdersInfo;
    dataGrid.ShowRowHeader = true;
    dataGrid.RowHeaderWidth = 50;
    dataGrid.CellRenderers.Remove("RowHeader");
    dataGrid.CellRenderers.Add("RowHeader", new CustomGridRowHeaderCellRenderer());
    View.AddSubview(dataGrid);
}

The below code illustrates how to customize the GridRowHeaderCellRenderer to display row index in RowHeaderCell in SfDataGrid.

public class CustomGridRowHeaderCellRenderer: GridRowHeaderCellRenderer
{     
    public CustomGridRowHeaderCellRenderer()
    {
 
    }
 
    protected override GridRowHeaderCell OnCreateDisplayUIView()
    {
        GridRowHeaderCell rowHeaderCell = new GridRowHeaderCell();
        UILabel rowHeader = new UILabel();
        rowHeader.TextColor = UIColor.Black;
        rowHeader.TextAlignment = UITextAlignment.Center;   
        rowHeaderCell.AddSubview(rowHeader);
        rowHeader.Frame = new CoreGraphics.CGRect(0, 0, this.DataGrid.RowHeaderWidth, this.DataGrid.RowHeight);
        return rowHeaderCell;
    }
 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, GridRowHeaderCell view)
    {
        UILabel rowHeader = (UILabel)view.Subviews[0];
 
        // Setting "Index" as text for the RowHeader column in header row
        if (dataColumn.RowIndex == 0)
        {
            rowHeader.Text = "Index";
        }
        // Setting the RowIndex as text for the RowHeader
        else
        {
            rowHeader.Text = dataColumn.RowIndex.ToString();
        }
        base.OnInitializeDisplayView(dataColumn, view);
    }
 
    public override void OnUpdateDisplayValue(DataColumnBase dataColumn, GridRowHeaderCell view)
    {
        UILabel rowHeader = (UILabel)view.Subviews[0];
 
        // RowHeader's text is updated when the datagrid is scrolled
        rowHeader.Text = dataColumn.RowIndex.ToString();
 
        base.OnUpdateDisplayValue(dataColumn, view);
    }
 
}

Screenshot:

$C:\Users\suhasini.suresh\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Simulator Screen Shot 10-Feb-2017, 1.59.24 PM.PNG$