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: