Cell Tooltips

[Dan]

I'd like to display dates in the grid in a short format, and then have a hover over tooltip that displays the full date.  For example, a cell might have 13/09, and the tooltip will display 13/09/2009.

Is this possible in the RadGridView?

Thanks,
Dan

[Rossen Hristov]

Hello Dan,

This can be easily achieved with RadGridView. You only need to define a style for the cells in your date column. In the style, bind the ToolTip property to the appropriate data member and use an IValueConverter to convert the date to a suitable format. Here is how to do this:

<Window x:Class="Ticket223276_CellTooltipWithFormattedDate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:Ticket223276_CellTooltipWithFormattedDate"
    Title="Window1">
    <Grid>
        <Grid.Resources>
            <local:DateToolTipConverter x:Key="DateToolTipConverter" />
            <Style x:Key="DateColumnStyle" TargetType="telerik:GridViewCell">
                <Setter Property="ToolTip"
                        Value="{Binding Received, Converter={StaticResource DateToolTipConverter}}" />
            </Style>
        </Grid.Resources>
        <telerik:RadGridView Name="grid" AutoGenerateColumns="False">

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Subject}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Sender}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Received}"
                        DataFormatString="{}{0:MMM/yyyy}"
                        CellStyle="{StaticResource DateColumnStyle}">
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

And here is the very simple converter:

    public class DateToolTipConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((DateTime) value).ToString("dd/MM/yyyy");
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

I have attached a sample project that can serve as a starting point for you. Please, let me know if you have any other questions.

All the best,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dan]

Hi Ross

Thanks for the quick response - that's exactly what I'm looking for.

Just say I have a grid with multiple date columns and I want to perform this on each column - is the only way to do this to define a separate style for each column?

[Rossen Hristov]

Hi Dan,

You can "bring up" the style to affect all GridViewCells in the following manner (style them by Type):

<Window x:Class="Ticket223276_CellTooltipWithFormattedDate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:Ticket223276_CellTooltipWithFormattedDate"
    Title="Window1">
    <Grid>
        <Grid.Resources>
            <local:DateToolTipConverter x:Key="DateToolTipConverter" />
            <Style TargetType="telerik:GridViewCell">
                <Setter Property="ToolTip"
                        Value="{Binding Received, Converter={StaticResource DateToolTipConverter}}" />
            </Style>
        </Grid.Resources>
        <telerik:RadGridView Name="grid" AutoGenerateColumns="False">

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Subject}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Sender}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Received}" DataFormatString="{}{0:MMM/yyyy}">
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

Have in mind though that this will affect ALL cells in the grid and if you have columns that should not have a ToolTip or are not DateTime columns, you might want to stick with the "per-column" solution which lets you fine-tune each column separately.

Please, do not hesitate to contact us again if you have any other questions.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Viki]

Hi,

1. What will be the 'Value' if I just want the tooltip display the content of the cell (for each cell in the RadGridView)?
    Is it will work even if most of the grid's columns are constructed in the run time in the code behind (C#) and not in the XAML?
2. How to set the tooltip for each cell in the RadGridView, where the tooltip 'Value' is per column header?

Thanks,
Viki

[Maya]

Hi Viki,

You can define the ToolTip as follows:

<Window.Resources>
        <Style TargetType="{x:Type telerik:GridViewCell}">
            <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Value, Mode=TwoWay}"/>
        </Style>
</Window.Resources>

Considering setting a ToolTip for the header of a column, you can do the following:

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" >
                    <telerik:GridViewDataColumn.Header>
                        <TextBlock Text="Name" ToolTipService.ToolTip="MyCustomToolTip" />
                    </telerik:GridViewDataColumn.Header>
                </telerik:GridViewDataColumn>

  
Another possible approach could be during RowLoaded event like:

private void clubsGrid_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
        {
            var row = e.Row as GridViewHeaderRow;
            var cells = row.ChildrenOfType<GridViewHeaderCell>();
            foreach (GridViewHeaderCell cell in cells)
            {
                cell.SetValue(ToolTipService.ToolTipProperty, (cell.Column as GridViewDataColumn).DataMemberBinding.Path.Path);
            }

Let me know how whether those approaches fit into your scenario or in case you need any further assistance.

All the best,
Maya
the Telerik team

[Viki]

Hi Maya,

Thanks for the answers!

1. On the firsf suggestion, in this line:

<Setter Property="ToolTipService.ToolTip" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Value, Mode=TwoWay}"/>

I got the following error: "Set property '' threw an exception".

If the 'Style' is a part of 'Grid.Resources', is it enough for its implementation or there is a need to set a key for this 'Style' and to set the Grid style to this key or something else for the implementation?

2. On the 'RowLoaded' event, the 'cells' collection has only 7 items, although there are 14 columns (3 of them are static and constructed by the XAML and the rest are dynamic (according the user decision) and are constructed in the run time in the code behind (C#)), so I have tooltips only for the first 7 columns.

Thanks,
Viki

[Maya]

Hi Viki,

Could you verify whether you are working with RadGridView for Silverlight or WPF ?
Considering the second issue, this would be the expected behavior since not all columns are initialized, consequently not all cells are created.
What you can try is to define the ToolTip during the initialization of the columns:

// Option 1 - XAML:
<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" >
                    <telerik:GridViewDataColumn.Header>
                        <TextBlock Text="Name" ToolTipService.ToolTip="MyCustomToolTip" />
                    </telerik:GridViewDataColumn.Header>
                </telerik:GridViewDataColumn>

//Option 2 - code-behind:
var column = new GridViewDataColumn();
            column.UniqueName = "Name";
            var textBlock = new TextBlock() { Text = "Name" };
            column.Header = textBlock;
            ToolTipService.SetToolTip(textBlock, "MyCustomTooltip");
            column.DataMemberBinding = new Binding("Name");
            this.clubsGrid.Columns.Add(column);

Will that meet your requirements ?  

All the best,
Maya
the Telerik team