Category / Section
How to convert Point to Index and Index to Point in SfDataGrid?
1 min read
SfDataGrid does not have built-in support for tooltip for its cells. However, you can achieve this requirement by displaying a custom view when interacting on SfDataGrid. You can use the SfDataGrid.RowColumnIndexToPoint method to position the custom view when interacting with the grid.
The below code illustrates how to display a custom view as tooltip in SfDataGrid.
public partial class MainPage : ContentPage
{
private Label toolTipLabel;
private bool isTooltipDisplayed = false;
private string currentColumnName;
public MainPage()
{
InitializeComponent();
CreateToolTip();
datagrid.GridTapped += Datagrid_GridTapped;
}
private void Datagrid_GridTapped(object sender, GridTappedEventsArgs e)
{
relativeLayout.Children.Remove(toolTipLabel);
isTooltipDisplayed = false;
}
public void CreateToolTip()
{
toolTipLabel = new Label();
toolTipLabel.HorizontalTextAlignment = TextAlignment.Center;
toolTipLabel.VerticalTextAlignment = TextAlignment.Center;
toolTipLabel.WidthRequest = 90;
toolTipLabel.HeightRequest = 50;
toolTipLabel.BackgroundColor = Color.Gray;
toolTipLabel.TextColor = Color.Black;
}
private void Datagrid_GridLongPress(object sender , GridLongPressedEventsArgs e)
{
if (!isTooltipDisplayed)
{
currentColumnName = datagrid.Columns[e.RowColumnindex.ColumnIndex].MappingName;
var point = datagrid.RowColumnIndexToPoint(e.RowColumnindex);
relativeLayout.Children.Add(toolTipLabel, Constraint.Constant(point.X+50), Constraint.Constant(point.Y+30));
var rowData = datagrid.GetRecordAtRowIndex(e.RowColumnindex.RowIndex);
var cellValue = datagrid.GetCellValue(rowData, currentColumnName);
toolTipLabel.Text = cellValue.ToString();
isTooltipDisplayed = true;
}
else
{
relativeLayout.Children.Remove(toolTipLabel);
isTooltipDisplayed = false;
}
}
}
On executing the above code the below output is obtained.

Sample Link: