Articles in this section
Category / Section

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.Add("RowHeader", new CustomGridRowHeaderCellRenderer());


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;   
        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
            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);



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


Sample Link:

How to display RowIndex at RowHeaderCell in SfDataGrid

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