Skip to content

Commit 2817b11

Browse files
vijayarasanvijayarasan
authored
Merge pull request #5 from SyncfusionExamples/ES-975464
ES-975464 - Resolve the ReadMe file length issue in this sample repository
2 parents 6575200 + f0d8910 commit 2817b11

4 files changed

Lines changed: 148 additions & 2 deletions

File tree

‎CustomizedToolTip.png‎

30.6 KB
Loading

‎README.md‎

Lines changed: 148 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,148 @@
1-
# WPF-GridControl-ToolTip
2-
This repository contains the sample which shows add or remove the tooltip to a specific cell or row or column in WPF GridControl.
1+
# WPF GridControl ToolTip
2+
3+
This repository contains the sample which shows add or remove the tooltip to a specific cell or row or column in [WPF GridControl](https://www.syncfusion.com/wpf-controls/excel-like-grid).
4+
5+
### ToolTip for row and column
6+
7+
ToolTip can be displayed for any row or column by setting the [ShowToolTip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_ShowTooltip) and ToolTip text can be customized by setting the [ToolTip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_ToolTip).
8+
9+
``` csharp
10+
//Adding tooltip to the specific row
11+
gridcontrol.Model.RowStyles[1].ToolTip = "First row";
12+
gridcontrol.Model.RowStyles[1].ShowTooltip = true;
13+
14+
//Adding tooltip to the specific column
15+
gridcontrol.Model.ColStyles[1].ToolTip = "First column";
16+
gridcontrol.Model.ColStyles[1].ShowTooltip = true;
17+
```
18+
19+
![Showing ToolTip for row and column](ToolTipForRowAndColumn.png)
20+
21+
### Set ToolTip in QueryCellInfo event
22+
23+
You can set the ToolTip to a specific cell or row or column by using the [QueryCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridControlBase.html#Syncfusion_Windows_Controls_Grid_GridControlBase_QueryCellInfo) event.
24+
25+
``` csharp
26+
private void Gridcontrol_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
27+
{
28+
e.Style.ShowTooltip = true;
29+
//Show tooltip for specific index
30+
if (e.Cell.RowIndex == 1 && e.Cell.ColumnIndex == 1)
31+
e.Style.ToolTip = " Grid (" + gridcontrol.Model[1, 1].CellValue +") ";
32+
// Show tooltip for row.
33+
if (e.Cell.ColumnIndex > 0 && e.Cell.RowIndex == 5)
34+
e.Style.ToolTip = " Row " + "(" + e.Cell.RowIndex + "," + e.Cell.ColumnIndex + ") ";
35+
// Show tooltip for column.
36+
if (e.Cell.RowIndex > 0 && e.Cell.ColumnIndex == 4)
37+
e.Style.ToolTip = " Column " + "(" + e.Cell.RowIndex + "," + e.Cell.ColumnIndex + ") ";
38+
}
39+
```
40+
41+
![Showing ToolTip using QueryCellInfo](ToolTipUsingQueryCellInfo.png)
42+
43+
### Hide ToolTip for disabled cell
44+
45+
You can disable the cell by setting `Enabled` property to `false`. If you want to hide the tooltip for this disabled cell, you need to set the [ShowToolTip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_ShowTooltip) property to `false`.
46+
47+
``` csharp
48+
gridcontrol.Model[1, 1].Enabled = false;
49+
gridcontrol.Model[1, 1].ToolTip = " Grid (" + gridcontrol.Model[1, 1].CellValue + ") ";
50+
gridcontrol.Model[1, 1].ShowTooltip = false;
51+
52+
//Using QueryCellInfo
53+
private void Gridcontrol_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
54+
{
55+
if (e.Cell.RowIndex == 1 && e.Cell.ColumnIndex == 1)
56+
{
57+
e.Style.Enabled = false;
58+
e.Style.ToolTip = " Grid (" + e.Cell.RowIndex + "," + e.Cell.ColumnIndex + ") ";
59+
e.Style.ShowTooltip = false;
60+
}
61+
}
62+
```
63+
64+
### Customize the ToolTip
65+
66+
The tooltip appearance can be customized by defining DataTemplate. The DataTemplate can be assigned to the [GridStyleInfo.ToolTipTemplateKey](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_TooltipTemplateKey) or [GridStyleInfo.ToolTipTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_TooltipTemplate) property. If you are using tooltipTemplate1 then you need to assign template to its corresponding template key property namely GridStyleInfo.ToolTipTemplate or GridStyleInfo.ToolTipTemplateKey.
67+
68+
[GridStyleInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html) which holds cell information is the DataContext for data template of ToolTip.
69+
70+
#### Using ToolTipTemplateKey
71+
72+
##### XAML
73+
74+
``` xml
75+
<Window.Resources>
76+
<DataTemplate x:Key="tooltipTemplate1">
77+
<Border Name="Border"
78+
Background="Green"
79+
BorderBrush="Black"
80+
BorderThickness="1" Width="60" Height="20"
81+
CornerRadius="0">
82+
<TextBlock Background="Transparent" Text="{Binding Path=ToolTip}" Padding="2" />
83+
</Border>
84+
</DataTemplate>
85+
</Window.Resources>
86+
```
87+
88+
##### C#
89+
90+
``` csharp
91+
//Set the template key to a particular index
92+
gridcontrol.Model[1, 1].TooltipTemplateKey = "tooltipTemplate1";
93+
94+
//Using QueryCellInfo event
95+
private void Gridcontrol_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
96+
{
97+
if (e.Cell.RowIndex == 1 && e.Cell.ColumnIndex == 1)
98+
{
99+
e.Style.ToolTip = " Grid (" + e.Cell.RowIndex + "," + e.Cell.ColumnIndex + ") ";
100+
e.Style.TooltipTemplateKey = "tooltipTemplate1";
101+
}
102+
}
103+
```
104+
105+
#### Using ToolTipTemplate
106+
107+
##### XAML
108+
109+
``` xml
110+
<Window.Resources>
111+
<DataTemplate x:Key="tooltipTemplate1">
112+
<Border Name="Border"
113+
Background="Green"
114+
BorderBrush="Black"
115+
BorderThickness="1" Width="60" Height="20"
116+
CornerRadius="0">
117+
<TextBlock Background="Transparent" Text="{Binding Path=ToolTip}" Padding="2" />
118+
</Border>
119+
</DataTemplate>
120+
</Window.Resources>
121+
```
122+
123+
##### C#
124+
125+
``` csharp
126+
//Set the template key to a particular index
127+
gridcontrol.Model[1, 1].TooltipTemplate = (DataTemplate)this.Resources["tooltipTemplate1"];
128+
129+
//Using QueryCellInfo event
130+
private void Gridcontrol_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
131+
{
132+
if (e.Cell.RowIndex == 1 && e.Cell.ColumnIndex == 1)
133+
{
134+
e.Style.ToolTip = " Grid (" + e.Cell.RowIndex + "," + e.Cell.ColumnIndex + ") ";
135+
e.Style.TooltipTemplate = (DataTemplate)this.Resources["tooltipTemplate1"];
136+
}
137+
}
138+
```
139+
140+
![Customizing ToolTip using ToolTipTemplate](CustomizedToolTip.png)
141+
142+
### Remove the ToolTip
143+
144+
The `ResetValue` method is used to remove the ToolTip for any cell or row or column in GridControl and to reset the ToolTip value to the default values.
145+
146+
``` csharp
147+
gridcontrol.Model[1, 1].ResetValue(GridStyleInfoStore.ToolTipProperty);
148+
```

‎ToolTipForRowAndColumn.png‎

30.9 KB
Loading

‎ToolTipUsingQueryCellInfo.png‎

31.1 KB
Loading

0 commit comments

Comments
 (0)