Skip to content

Commit 78a7b9f

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #3520 from syncfusion-content/MAUI-DataGrid-ToolTip
MAUI - 975431: Prepared UG documentation for ToolTip support in MAUI DataGrid
2 parents fe76311 + c56db72 commit 78a7b9f

7 files changed

+234
-0
lines changed

‎MAUI/DataGrid/Images/tooltip/maui-datagrid-tooltip-basic.png

89.1 KB
Loading

‎MAUI/DataGrid/Images/tooltip/maui-datagrid-tooltip-style.png

89 KB
Loading

‎MAUI/DataGrid/Images/tooltip/maui-datagrid-tooltip-template-selector1.png

89.8 KB
Loading

‎MAUI/DataGrid/Images/tooltip/maui-datagrid-tooltip-template-selector2.png

89.5 KB
Loading

‎MAUI/DataGrid/Images/tooltip/maui-datagrid-tooltip-template.png

91.4 KB
Loading

‎MAUI/DataGrid/ToolTip.md

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
---
2+
layout: post
3+
title: ToolTip in .NET MAUI DataGrid control | Syncfusion®
4+
description: Learn here all about ToolTip support in Syncfusion® MAUI DataGrid (SfDataGrid) control and more here.
5+
platform: MAUI
6+
control: SfDataGrid
7+
documentation: ug
8+
keywords : maui datagrid, maui grid, grid maui, maui gridview, grid in maui, .net maui datagrid, .net maui grid, .net grid maui, .net maui tooltip, maui tooltip
9+
---
10+
11+
# ToolTip in MAUI DataGrid (SfDataGrid)
12+
13+
The [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) provides support for displaying tooltips. ToolTip provides the support to show the pop-up window that displays the information when interacting with cells of SfDataGrid.
14+
15+
To show tooltips:
16+
- **On Windows/Mac**: Hover the mouse cursor over any cell in the grid
17+
- **On Android/iOS**: Long press on any cell in the grid
18+
19+
## Show tooltip in a header and record cell
20+
21+
To enable tooltip for datagrid, set the `SfDataGrid.ShowToolTip` property to `true`. This will display tooltip containing cell content when users interact with the cells.
22+
23+
{% tabs %}
24+
{% highlight XAML %}
25+
26+
<syncfusion:SfDataGrid x:Name="dataGrid"
27+
ItemsSource="{Binding OrdersInfo}"
28+
ShowToolTip="True" />
29+
30+
{% endhighlight %}
31+
{% highlight c# %}
32+
33+
this.dataGrid.ShowToolTip = true;
34+
35+
{% endhighlight %}
36+
{% endtabs %}
37+
38+
<img alt="MAUI DataGrid displays ToolTip for Record Cell" src="Images\tooltip\maui-datagrid-tooltip-basic.png" width="404" />
39+
40+
You can enable tooltips for specific columns by setting the `DataGridColumn.ShowToolTip` property to `true` for the desired columns.
41+
42+
{% tabs %}
43+
{% highlight XAML %}
44+
<syncfusion:SfDataGrid.Columns>
45+
<syncfusion:DataGridTextColumn HeaderText="Order ID"
46+
MappingName="OrderID"
47+
ShowToolTip="True"/>
48+
<syncfusion:DataGridTextColumn HeaderText="Customer ID"
49+
MappingName="CustomerID"
50+
ShowToolTip="True"/>
51+
</syncfusion:SfDataGrid.Columns>
52+
{% endhighlight %}
53+
{% highlight c# %}
54+
dataGrid.Columns.Add(new DataGridTextColumn()
55+
{
56+
HeaderText = "Order ID",
57+
MappingName = "OrderID",
58+
ShowToolTip = true
59+
});
60+
61+
dataGrid.Columns.Add(new DataGridTextColumn()
62+
{
63+
HeaderText = "Customer ID",
64+
MappingName = "CustomerID",
65+
ShowToolTip = true
66+
});
67+
{% endhighlight %}
68+
{% endtabs %}
69+
70+
N>
71+
The `DataGridColumn.ShowToolTip` property takes higher priority than the `SfDataGrid.ShowToolTip` property.
72+
73+
## ToolTip Customization
74+
75+
You can customize the appearance of the tooltip in the MAUI SfDataGrid using either implicit styles or default style properties. Below are two approaches to achieve this:
76+
77+
### Apply Implicit Style
78+
79+
You can define an implicit style in the ContentPage.Resources section by targeting the DataGridToolTipView. This allows you to customize various visual aspects of the tooltip such as Background, TextColor, FontAttributes, FontFamily, and FontSize.
80+
81+
To change the tooltip's border appearance, use the Stroke and StrokeThickness properties within the implicit style.
82+
83+
* `Stroke`: Sets the border color of the tooltip.
84+
* `StrokeThickness`: Defines the thickness of the tooltip border.
85+
86+
{% tabs %}
87+
{% highlight XAML %}
88+
<ContentPage.Resources>
89+
<Style TargetType="syncfusion:DataGridToolTipView">
90+
<Setter Property="Background" Value="AliceBlue" />
91+
<Setter Property="Stroke" Value="Red" />
92+
<Setter Property="StrokeThickness" Value="2" />
93+
<Setter Property="TextColor" Value="Brown" />
94+
</Style>
95+
</ContentPage.Resources>
96+
{% endhighlight %}
97+
{% endtabs %}
98+
<img alt="Customizing ToolTip Style in MAUI DataGrid" src="Images\tooltip\maui-datagrid-tooltip-style.png" width="404" />
99+
100+
### Apply Default Style
101+
102+
You can apply basic tooltip styling using the DefaultStyle property of SfDataGrid. This method supports only background and text color customization.
103+
104+
{% tabs %}
105+
{% highlight XAML %}
106+
<syncfusion:SfDataGrid.DefaultStyle>
107+
<syncfusion:DataGridStyle ToolTipBackground="Red" ToolTipTextColor="White" />
108+
</syncfusion:SfDataGrid.DefaultStyle>
109+
{% endhighlight %}
110+
{% endtabs %}
111+
112+
## Load views to the Tooltip
113+
114+
### Customizing the ToolTip using DataTemplate
115+
116+
You can customize the appearance and content of tooltips by setting the `SfDataGrid.ToolTipTemplate` property.
117+
118+
{% tabs %}
119+
{% highlight XAML %}
120+
<syncfusion:SfDataGrid x:Name="dataGrid"
121+
ItemsSource="{Binding Orders}"
122+
ShowToolTip="True">
123+
124+
<syncfusion:SfDataGrid.ToolTipTemplate>
125+
<DataTemplate>
126+
<Image Height="100" Width="100" Source="{Binding Customer,Converter={StaticResource ImageConverter}}" />
127+
</DataTemplate>
128+
</syncfusion:SfDataGrid.ToolTipTemplate>
129+
130+
</syncfusion:SfDataGrid>
131+
{% endhighlight %}
132+
{% endtabs %}
133+
134+
<img alt="Customizing ToolTip using ToolTipTemplate in MAUI DataGrid" src="Images\tooltip\maui-datagrid-tooltip-template.png" width="404" />
135+
136+
### Customizing the ToolTip with DataTemplateSelector
137+
138+
You can load different tooltip templates conditionally based on cell data by using a DataTemplateSelector with the `SfDataGrid.ToolTipTemplate` property.
139+
140+
{% tabs %}
141+
{% highlight XAML %}
142+
<ContentPage.Resources>
143+
<ResourceDictionary>
144+
<DataTemplate x:Key="Default">
145+
<Border Stroke="Black" StrokeThickness="2">
146+
<Label Text="{Binding OrderID}" Background="Red" TextColor="White" Padding="2" />
147+
</Border>
148+
</DataTemplate>
149+
<DataTemplate x:Key="Alternative">
150+
<Border Stroke="Black" StrokeThickness="2" >
151+
<Label Text="{Binding OrderID}" Background="ForestGreen" TextColor="Black" Padding="2" />
152+
</Border>
153+
</DataTemplate>
154+
</ResourceDictionary>
155+
</ContentPage.Resources>
156+
157+
<ContentPage.Content>
158+
<syncfusion:SfDataGrid x:Name="dataGrid"
159+
ItemsSource="{Binding Orders}"
160+
ShowToolTip="True">
161+
162+
<syncfusion:SfDataGrid.ToolTipTemplate>
163+
<local:ToolTipTemplateSelector AlternateTemplate="{StaticResource Alternative}" DefaultTemplate="{StaticResource Default}" />
164+
</syncfusion:SfDataGrid.ToolTipTemplate>
165+
166+
</syncfusion:SfDataGrid>
167+
</ContentPage.Content>
168+
{% endhighlight %}
169+
{% highlight c# %}
170+
public class ToolTipTemplateSelector : DataTemplateSelector
171+
{
172+
public DataTemplate DefaultTemplate { get; set; }
173+
public DataTemplate AlternateTemplate { get; set; }
174+
175+
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
176+
{
177+
if (item is OrderInfo employee)
178+
{
179+
if (employee.OrderID % 2 == 0)
180+
{
181+
return AlternateTemplate;
182+
}
183+
else
184+
{
185+
return DefaultTemplate;
186+
}
187+
}
188+
189+
return DefaultTemplate;
190+
}
191+
}
192+
{% endhighlight %}
193+
{% endtabs %}
194+
195+
The below image refers the `DefaultTemplate` which is applied through `ToolTipTemplate`.
196+
197+
<img alt="Customizing ToolTip with ToolTipTemplateSelector in MAUI DataGrid" src="Images\tooltip\maui-datagrid-tooltip-template-selector2.png" width="404"/>
198+
199+
The below image refers the `AlternateTemplate` which is applied through `ToolTipTemplate`.
200+
201+
<img alt="Displaying AlternateTemplate for ToolTip in MAUI DataGrid" src="Images\tooltip\maui-datagrid-tooltip-template-selector1.png" width="404"/>
202+
203+
## Events
204+
205+
### CellToolTipOpening event
206+
207+
The [CellToolTipOpening]() event is raised when a tooltip is about to be displayed for a cell. The event provides [DataGridCellToolTipOpeningEventArgs]() which contains the following properties:
208+
209+
* [Column](): Gets the GridColumn of the cell for which the tooltip is being shown.
210+
* [RowData](): Gets the data associated with a specific row.
211+
* [RowColumnIndex](): Gets the row and column index of the cell.
212+
* [ToolTipText](): Gets the text content that is displayed within the tooltip.
213+
* [Cancel](): Gets or sets a value indicating whether the tooltip should be displayed. Set to `true` to prevent the tooltip from showing.
214+
215+
{% tabs %}
216+
{% highlight XAML %}
217+
<syncfusion:SfDataGrid x:Name="dataGrid"
218+
ItemsSource="{Binding OrdersInfo}"
219+
ShowToolTip="True"
220+
CellToolTipOpening="DataGrid_CellToolTipOpening">
221+
</syncfusion:SfDataGrid>
222+
{% endhighlight %}
223+
{% highlight c# %}
224+
dataGrid.CellToolTipOpening += DataGrid_CellToolTipOpening;
225+
226+
private void DataGrid_CellToolTipOpening(object sender, DataGridCellToolTipOpeningEventArgs e)
227+
{
228+
229+
}
230+
{% endhighlight %}
231+
{% endtabs %}
232+
233+

‎maui-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -585,6 +585,7 @@
585585
<li><a href="/maui/DataGrid/row-height-customization">Row Height Customization</a></li>
586586
<li><a href="/maui/DataGrid/unbound-row">Unbound Row</a></li>
587587
<li><a href="/maui/DataGrid/unbound-column">Unbound Column</a></li>
588+
<li><a href="/maui/DataGrid/ToolTip">ToolTip</a></li>
588589
<li><a href="/maui/DataGrid/serialization">Serialization and Deserialization</a></li>
589590
<li><a href="/maui/DataGrid/export-to-excel">Export to Excel</a></li>
590591
<li><a href="/maui/DataGrid/export-to-pdf">Export to PDF</a></li>

0 commit comments

Comments
 (0)