Skip to content

Commit d55d1d3

Browse files
vijayarasanvijayarasan
authored
Merge pull request #1 from SyncfusionExamples/ES-16598-KBarticle
How to show the rendered HTML inside the ToolTip of the WPF SfDataGrid
2 parents c6aeb55 + 08badba commit d55d1d3

16 files changed

Lines changed: 680 additions & 2 deletions

‎README.md‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,54 @@
1-
# How-to-show-the-rendered-HTML-inside-the-ToolTip-of-the-WPF-SfDataGrid
2-
This demo shows how to show the rendered HTML inside the ToolTip of the WPF SfDataGrid
1+
# How to show the rendered HTML inside the ToolTip of the WPF DataGrid (SfDataGrid)
2+
3+
By default, [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) does not have built-in support to render HTML code and display it in the **ToolTip**. However, we can achieve this requirement by rendering the **HTML** using [WPF RichTextBoxAdv](https://www.syncfusion.com/wpf-controls/richtextbox) (SfRichTextBoxAdv).
4+
5+
In this approach, load the HTML code into RichTextBoxAdv, render the HTML content, and then set RichTextBoxAdv as the ToolTip content inside the [CellToolTipOpening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CellToolTipOpening) event.
6+
7+
**Step 1: Subscribe to the CellToolTipOpening Event of the DataGrid**
8+
9+
Subscribe to the CellToolTipOpening event of DataGrid, and enable the [ShowToolTip](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowToolTip) property for the desired column where the ToolTip should be displayed.
10+
11+
```xml
12+
<syncfusion:SfDataGrid HorizontalAlignment="Center"
13+
x:Name="dataGrid"
14+
ItemsSource="{Binding Orders}"
15+
AutoGenerateColumns="False"
16+
CellToolTipOpening="OnCellToolTipOpening">
17+
<syncfusion:SfDataGrid.Columns>
18+
<syncfusion:GridTextColumn HeaderText="Customer ID"
19+
MappingName="CustomerID"
20+
ShowToolTip="True"/>
21+
<syncfusion:GridTextColumn HeaderText="Customer Name"
22+
MappingName="CustomerName"/>
23+
</syncfusion:SfDataGrid.Columns>
24+
</syncfusion:SfDataGrid>
25+
```
26+
**Step 2: Customize the ToolTip content to display as HTML content**
27+
28+
In the event handler, retrieve the HTML code, convert it into a stream, and pass it to RichTextBoxAdv. Then, set RichTextBoxAdv as the ToolTip content of the DataGrid.
29+
30+
```csharp
31+
SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv() { Width = 300, Height = 200, LayoutType = LayoutType.Continuous};
32+
33+
private void OnCellToolTipOpening(object sender, GridCellToolTipOpeningEventArgs e)
34+
{
35+
if (e.Record != null && e.Record is OrderInfo)
36+
{
37+
string htmlContent = (e.Record as OrderInfo).HTMLCode;
38+
if (htmlContent != null)
39+
{
40+
Stream stream = new MemoryStream();
41+
byte[] bytes = Encoding.UTF8.GetBytes(htmlContent);
42+
if (bytes != null)
43+
stream.Write(bytes, 0, bytes.Length);
44+
stream.Position = 0;
45+
richTextBoxAdv.Load(stream, FormatType.Html);
46+
e.ToolTip.Content = richTextBoxAdv;
47+
}
48+
}
49+
}
50+
```
51+
52+
![ToolTip display HTML value](ToolTipdisplayHTML.png)
53+
54+
Take a moment to peruse the [WPF DataGrid - ToolTip](https://help.syncfusion.com/wpf/datagrid/tooltip) documentation where you can find about the ToolTip with code examples.

‎SfDataGrid_ToolTip/App.config‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<configuration>
3+
<startup>
4+
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.8" />
5+
</startup>
6+
</configuration>

‎SfDataGrid_ToolTip/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="WPFDataGrid.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:WPFDataGrid"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎SfDataGrid_ToolTip/App.xaml.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Configuration;
4+
using System.Data;
5+
using System.Linq;
6+
using System.Threading.Tasks;
7+
using System.Windows;
8+
9+
namespace WPFDataGrid
10+
{
11+
/// <summary>
12+
/// Interaction logic for App.xaml
13+
/// </summary>
14+
public partial class App : Application
15+
{
16+
}
17+
}

‎SfDataGrid_ToolTip/MainWindow.xaml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Window x:Class="WPFDataGrid.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:local="clr-namespace:WPFDataGrid"
7+
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
8+
mc:Ignorable="d"
9+
Title="ToolTipSampleDemo" Height="450" Width="800">
10+
<Window.DataContext>
11+
<local:OrderInfoCollection/>
12+
</Window.DataContext>
13+
<Grid>
14+
<syncfusion:SfDataGrid Margin="1" x:Name="dataGrid" ItemsSource="{Binding Orders}" AutoGenerateColumns="False" CellToolTipOpening="OnCellToolTipOpening">
15+
<syncfusion:SfDataGrid.Columns>
16+
<syncfusion:GridTextColumn MappingName="CustomerID"
17+
HeaderText="Customer ID"
18+
ShowToolTip="True"/>
19+
<syncfusion:GridTextColumn MappingName="CustomerName"
20+
HeaderText="Customer Name"/>
21+
</syncfusion:SfDataGrid.Columns>
22+
</syncfusion:SfDataGrid>
23+
</Grid>
24+
</Window>

‎SfDataGrid_ToolTip/MainWindow.xaml.cs‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.IO;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
using System.Windows;
8+
using System.Windows.Controls;
9+
using System.Windows.Data;
10+
using System.Windows.Documents;
11+
using System.Windows.Input;
12+
using System.Windows.Media;
13+
using System.Windows.Media.Imaging;
14+
using System.Windows.Navigation;
15+
using System.Windows.Shapes;
16+
using Syncfusion.UI.Xaml.Grid;
17+
using Syncfusion.Windows.Controls.RichTextBoxAdv;
18+
19+
namespace WPFDataGrid
20+
{
21+
/// <summary>
22+
/// Interaction logic for MainWindow.xaml
23+
/// </summary>
24+
public partial class MainWindow : Window
25+
{
26+
public MainWindow()
27+
{
28+
InitializeComponent();
29+
}
30+
31+
SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv() { Width = 300, Height = 200, LayoutType = LayoutType.Continuous };
32+
private void OnCellToolTipOpening(object sender, GridCellToolTipOpeningEventArgs e)
33+
{
34+
if (e.Record != null && e.Record is OrderInfo)
35+
{
36+
string htmlContent = (e.Record as OrderInfo).HTMLCode;
37+
if (htmlContent != null)
38+
{
39+
Stream stream = new MemoryStream();
40+
byte[] bytes = Encoding.UTF8.GetBytes(htmlContent);
41+
if (bytes != null)
42+
stream.Write(bytes, 0, bytes.Length);
43+
stream.Position = 0;
44+
richTextBoxAdv.Load(stream, FormatType.Html);
45+
e.ToolTip.Content = richTextBoxAdv;
46+
}
47+
}
48+
}
49+
}
50+
}

‎SfDataGrid_ToolTip/OrderInfo.cs‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.ComponentModel;
7+
using System.Runtime.CompilerServices;
8+
9+
namespace WPFDataGrid
10+
{
11+
12+
public class OrderInfo : INotifyPropertyChanged
13+
{
14+
private string customerId;
15+
private string customerName;
16+
private string _htmlCode;
17+
18+
19+
public event PropertyChangedEventHandler PropertyChanged;
20+
21+
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
22+
{
23+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
24+
}
25+
26+
public string HTMLCode
27+
{
28+
get { return _htmlCode; }
29+
set
30+
{
31+
if (_htmlCode != value)
32+
{
33+
_htmlCode = value;
34+
OnPropertyChanged();
35+
}
36+
}
37+
}
38+
39+
public string CustomerID
40+
{
41+
get => customerId;
42+
set
43+
{
44+
if (customerId != value)
45+
{
46+
customerId = value;
47+
OnPropertyChanged();
48+
}
49+
}
50+
}
51+
52+
public string CustomerName
53+
{
54+
get => customerName;
55+
set
56+
{
57+
if (customerName != value)
58+
{
59+
customerName = value;
60+
OnPropertyChanged();
61+
}
62+
}
63+
}
64+
public OrderInfo(string customerName,string customerId, string htmlCode)
65+
{
66+
this.CustomerName = customerName;
67+
this.CustomerID = customerId;
68+
this.HTMLCode = htmlCode;
69+
}
70+
}
71+
72+
}

‎SfDataGrid_ToolTip/OrderInfoCollection.cs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Collections.ObjectModel;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
8+
namespace WPFDataGrid
9+
{
10+
public class OrderInfoCollection
11+
{
12+
private ObservableCollection<OrderInfo> _orders;
13+
public ObservableCollection<OrderInfo> Orders
14+
{
15+
get { return _orders; }
16+
set { _orders = value; }
17+
}
18+
public OrderInfoCollection()
19+
{
20+
_orders = new ObservableCollection<OrderInfo>();
21+
this.GenerateOrders();
22+
}
23+
private void GenerateOrders()
24+
{
25+
_orders.Add(new OrderInfo("Maria Anders", "Germany", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Maria Anders, Germany, ALFKI, Berlin.</p></body></html>"));
26+
27+
_orders.Add(new OrderInfo("Ana Trujilo", "Mexico", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Ana Trujilo, Mexico, ANATR, Mexico D.F..</p></body></html>"));
28+
29+
_orders.Add(new OrderInfo("Antonio Moreno", "Mexico", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Antonio Moreno, Mexico, ANTON, Mexico D.F..</p></body></html>"));
30+
31+
_orders.Add(new OrderInfo("Thomas Hardy", "UK", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Thomas Hardy, UK, AROUT, London.</p></body></html>"));
32+
33+
_orders.Add(new OrderInfo("Christina Berglund", "Sweden", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Christina Berglund, Sweden, BERGS, Lula.</p></body></html>"));
34+
35+
_orders.Add(new OrderInfo("Hanna Moos", "Germany", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Hanna Moos, Germany, BLAUS, Mannheim.</p></body></html>"));
36+
37+
_orders.Add(new OrderInfo("Frederique Citeaux", "France", "<html><head><style>body {font-family: Arial, sans-serif;font-size: 14px;}h1 {color: #0066cc;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p><p>Frederique Citeaux, France,BLONP, Strasbourg.</p></body></html>"));
38+
}
39+
}
40+
}

‎SfDataGrid_ToolTip/Properties/AssemblyInfo.cs‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
using System.Reflection;
2+
using System.Resources;
3+
using System.Runtime.CompilerServices;
4+
using System.Runtime.InteropServices;
5+
using System.Windows;
6+
7+
// General Information about an assembly is controlled through the following
8+
// set of attributes. Change these attribute values to modify the information
9+
// associated with an assembly.
10+
[assembly: AssemblyTitle("WPFDataGrid")]
11+
[assembly: AssemblyDescription("")]
12+
[assembly: AssemblyConfiguration("")]
13+
[assembly: AssemblyCompany("")]
14+
[assembly: AssemblyProduct("WPFDataGrid")]
15+
[assembly: AssemblyCopyright("Copyright © 2025")]
16+
[assembly: AssemblyTrademark("")]
17+
[assembly: AssemblyCulture("")]
18+
19+
// Setting ComVisible to false makes the types in this assembly not visible
20+
// to COM components. If you need to access a type in this assembly from
21+
// COM, set the ComVisible attribute to true on that type.
22+
[assembly: ComVisible(false)]
23+
24+
//In order to begin building localizable applications, set
25+
//<UICulture>CultureYouAreCodingWith</UICulture> in your .csproj file
26+
//inside a <PropertyGroup>. For example, if you are using US english
27+
//in your source files, set the <UICulture> to en-US. Then uncomment
28+
//the NeutralResourceLanguage attribute below. Update the "en-US" in
29+
//the line below to match the UICulture setting in the project file.
30+
31+
//[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]
32+
33+
34+
[assembly: ThemeInfo(
35+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
36+
//(used if a resource is not found in the page,
37+
// or application resource dictionaries)
38+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
39+
//(used if a resource is not found in the page,
40+
// app, or any theme specific resource dictionaries)
41+
)]
42+
43+
44+
// Version information for an assembly consists of the following four values:
45+
//
46+
// Major Version
47+
// Minor Version
48+
// Build Number
49+
// Revision
50+
//
51+
[assembly: AssemblyVersion("1.0.0.0")]
52+
[assembly: AssemblyFileVersion("1.0.0.0")]

0 commit comments

Comments
 (0)