I figured out what the issue was ...
In our SQL database, we store line breaks as \n. I have no idea why or how, but somewhere between the time the data was retrieved from SQL via our WCF service and the time the data was bound to the GridView, the tooltip string was being modified. All of the \n line breaks were being escaped changing them to \\n.
What I ended up doing to resolve that issue was make a simple converter that replaced \\n with Environment.NewLine:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var s = string.Empty;
try
{
s = value.ToString().Trim().Replace("\\n", Environment.NewLine);
}
catch
{
// value is most likely null;
}
return s;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
Then, I simply had to change the ToolTipService.ToolTip property value of the Image to:
<Image Source="/HubSilverlight;component/Images/status_icon_info.png"
ToolTipService.ToolTip="{Binding CreditIssuesText, Converter={StaticResource NewLineConverter}}"
Visibility="{Binding CreditIssuesText, Converter={StaticResource TextToVisibilityConverter}}"
Width="16"
Height="16" />
This was great, but it brought up another issue ...
The tooltip only showed when you hovered over the Image in the cell. The desired effect was to show the tooltip when you hovered over any part of the cell.
@HeenaPatil's answer pointed me in the right direction to resolve that issue.
The solution was to use a TextBlock inside of the GridViewColumn.ToolTipTemplate property where I bound the tooltip text to the TextBlock.Text property:
<telerik:GridViewColumn UniqueName="CreditIssuesText"
CellStyle="{StaticResource rgvCellStyle}"
HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
HeaderTextAlignment="Center"
TextAlignment="Center"
Width="Auto">
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<Image Source="/HubSilverlight;component/Images/status_icon_info.png"
Visibility="{Binding CreditIssuesText, Converter={StaticResource TextToVisibilityConverter}}"
Width="16"
Height="16" />
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
<telerik:GridViewColumn.ToolTipTemplate>
<DataTemplate>
<TextBlock Text="{Binding CreditIssuesText, Converter={StaticResource NewLineConverter}}" />
</DataTemplate>
</telerik:GridViewColumn.ToolTipTemplate>
</telerik:GridViewColumn>
Again, this was great, but it brought up yet another issue ...
I was trying to get the tooltip to show at the bottom of the cell, but it was not respecting the ToolTip.Placement value no matter where I put the property, whether it was on the TextBlock, Image, GridViewColumn, or anywhere else.
What I ended up having to do was replace the GridViewColumn.CellTemplate and GridViewColumn.ToolTipTemplate with GridViewColumn.CellStyle so that I could use its Template property to wrap the Image in a Border object where I moved the ToolTipService.ToolTip and ToolTipService.Placement properties to.
Once I did that, the tooltip showed when you hovered over any part of the cell, it respected the placement value and was positioned at the bottom of the cell, and the line breaks remained intact:
<telerik:GridViewColumn UniqueName="CreditIssuesText"
HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
HeaderTextAlignment="Center"
TextAlignment="Center"
Width="Auto">
<telerik:GridViewColumn.CellStyle>
<Style BasedOn="{StaticResource rgvCellStyle}"
TargetType="telerik:GridViewCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:GridViewCell">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ToolTipService.Placement="Bottom"
ToolTipService.ToolTip="{Binding CreditIssuesText, Converter={StaticResource NewLineConverter}}">
<Image Source="/HubSilverlight;component/Images/status_icon_info.png"
Visibility="{Binding CreditIssuesText, Converter={StaticResource TextToVisibilityConverter}}"
Width="16"
Height="16" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:GridViewColumn.CellStyle>
</telerik:GridViewColumn>
