Articles in this section
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.

tooltip

 

Sample Link:

How to display the tooltip in SfDataGrid?

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