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  to leave a comment
Access denied
Access denied