Display time slice tooltip information

[Datafyer]

How would I display information about the current timeslice the mouse is hovered in? This would be similar to a tooltip, but pertain to whatever zoom level and timeslice (8 PM or the 8th) the timebar is in.

[Missing User]

Hello Patrick,

You can set tooltips for the Item and Group controls as followed:

<telerik:RadTimeBar x:Name="timeBar"
 PeriodStart="03/26/2010" PeriodEnd="11/21/2010"
 VisiblePeriodStart="05/06/2010" VisiblePeriodEnd="06/12/2010"
 SelectionStart="06/03/2010" SelectionEnd="06/06/2010">

    <telerik:RadTimeBar.Resources>

        <Style x:Key="MyToolTip">

            <Setter Property="Control.ToolTip">

                <Setter.Value>

                    <StackPanel Orientation="Horizontal">

                        <TextBlock Text="{Binding StartDate}" />

                        <TextBlock Text=" - " />

                        <TextBlock Text="{Binding EndDate}" />

                    </StackPanel>

                </Setter.Value>

            </Setter>

        </Style>

        <Style TargetType="telerik:GroupControl" BasedOn="{StaticResource MyToolTip}" />

        <Style TargetType="telerik:ItemControl" BasedOn="{StaticResource MyToolTip}" />

    </telerik:RadTimeBar.Resources>

    <telerik:RadTimeBar.Intervals>

        <telerik:MonthInterval/>

        <telerik:DayInterval/>

    </telerik:RadTimeBar.Intervals>

</telerik:RadTimeBar>

Each Item and Group control has properties for Start and End date. It will be helpful if you provide more details about the result that you want to achieve and the information that you want to display in the tooltips. Thus we will do our best to give an appropriate solution.

Kind regards,

Polina

the Telerik team

[Datafyer]

First I would like to say thanks for the previous code. It is very close to what I was thinking.

Specifically what I had in mind was to display a tooltip containing a list of the lines displayed in the TimeBar. Each of these should be displayed as min, max, and average for the time slice.

For instance, if there are three displayed lines in the TimeBar and I hover over some time slice then it should display Min, Max, and Average for each of the line information.

[Missing User]

Hello Patrick,

Currently, the RadTimeBar control does not provide hover functionality by which you can get the start and the end date of the hovered period range (Group or Item) and based on them to determine the min, max and average of the lines. I forwarded this feature request to our developers for future consideration. I also logged it in our PITS system here.

All the best,

Polina

the Telerik team

[Datafyer]

I was able to do this by modifying the example posted earlier.

The key part of what I did was to set the datacontext of the ItemsControl. This allowed the PeriodSpan object to be usable inside of the template.

<Style x:Key="TimeBarToolTipStyle">
            <Setter Property="Control.ToolTip">
                <Setter.Value>
                    <my:RadWrapPanel Orientation="Vertical">
                        <my:RadWrapPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <Label Margin="5" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding Path=StartDate}" />
                            <Label Margin="5" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Content="-" />
                            <Label Margin="5" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding Path=EndDate}" />
                        </my:RadWrapPanel>

                        <!-- The DataContext is a sneak way to pass the PeriodSpan object to the template -->
                        <ItemsControl DataContext="{Binding }" ItemTemplate="{StaticResource UnitTooltipTemplate}" ItemsSource="......">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <my:RadWrapPanel Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </my:RadWrapPanel>
                </Setter.Value>
            </Setter>
        </Style>

I used this XAML in the template to pass the values to a converter where I did the calculation. I had one of each of these for Min, Max, and Avg.

<Label VerticalAlignment="Center">
    <Label.Content>
        <MultiBinding Converter="{StaticResource DataSeriesInformationConverter}" ConverterParameter="Min">
            <Binding Path="Unit" />
            <Binding RelativeSource="{RelativeSource AncestorType=ItemsControl}" Path="DataContext.StartDate" />
            <Binding RelativeSource="{RelativeSource AncestorType=ItemsControl}" Path="DataContext.EndDate" />
        </MultiBinding>
    </Label.Content>
</Label>

There probably is a slicker way, but this works for me.

[Carlos]

I am having a problem when I try to implement the first code excerpt (from Polina) that was cited in this thread. I am getting the following error:

The property 'ToolTip' was not found in type 'System.Windows.Controls.Control'.

I am using Telerik version 2011.2.920.1040.

Any ideas?

[Tsvetie]

Hello Carlos,
I tested the posted code fragment and had no problems running it. Please, find my test page attached. In case the problem persists, please open an official support ticket and send me a running test project, demonstrating the problem.

Kind regards,
Tsvetie
the Telerik team

[Basam]

Hello Polina,

I get error: Property 'Resources' was not found in 'RadTimebBar'.
Does the code work for RadTimeBar for Silverlight?
If not, is it possible to have tooltip bound for it?

I am using Telerik version Q1 2013

Thanks,

Basam

[Petar Marchev]

Hi Basam,

The Resources property is a FrameworkElement's property and the RadTimeBar inherits the FrameworkElement class. This sounds more like some visual studio compile error. I suggest you Clean and Rebuild the project and even manually deleting the bin and obj folders. You can also create a brand new project and try again to see if you still get this error.

Regards,
Petar Marchev
Telerik

[Basam]

Thanks for your reply.
I have only the MainPage on clean Silverlight project.
The error that I'm getting is "The property 'ToolTip' was not found in type 'System.Windows.Controls.Control'.
Do you have any sample code that shows a Bound tooltip for the timebar or show me where is the issue in my code?
Please find the code that I'm using for reference below.

Thanks for your help.

<UserControl x:Class="RadControlsSilverlightApp3.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" xmlns:my="clr-namespace:System;assembly=mscorlib">

    <Grid Background="White">
        <telerik:RadTimeBar x:Name="timeBar"
             PeriodStart="03/26/2010" PeriodEnd="11/21/2010"
             VisiblePeriodStart="05/06/2010" VisiblePeriodEnd="06/12/2010"
             SelectionStart="06/03/2010" SelectionEnd="06/06/2010">
            <telerik:RadTimeBar.Resources>
                <Style x:Key="MyToolTip">
                    <Setter Property="Control.ToolTip">
                        <Setter.Value>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding StartDate}" />
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style TargetType="telerik:GroupControl" BasedOn="{StaticResource MyToolTip}" />
                <Style TargetType="telerik:ItemControl" BasedOn="{StaticResource MyToolTip}" />
            </telerik:RadTimeBar.Resources>
            <telerik:RadTimeBar.Intervals>
                <telerik:MonthInterval/>
                <telerik:DayInterval/>
            </telerik:RadTimeBar.Intervals>
        </telerik:RadTimeBar>

    </Grid>
</UserControl>

[Petar Marchev]

Hi Basam,

Indeed there is no ToolTip property in the Control class in Silverlight, you can use the RadToolTipService instead:

<Style TargetType="telerik:ItemControl">
 <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding DataContext.StartDate, RelativeSource={RelativeSource Self}}" />

Regards,
Petar Marchev
Telerik

[Basam]

Your code is almost same as the code below, which doesn't show the tooltip in Sliverlight:
                <telerik:RadTimeBar Name="timeBar" telerik:RadToolTipService.ToolTipContent="{Binding StartDate}">
                    <telerik:RadTimeBar.Intervals>
                        <telerik:MonthInterval/>
                        <telerik:QuarterInterval/>
                        <telerik:YearInterval/>
                    </telerik:RadTimeBar.Intervals>
                    <telerik:RadColumnSparkline x:Name="sparkLine" XValuePath="date" YValuePath="volume">
                </telerik:RadTimeBar>

Prove me wrong by adding a tooltip to the Telerik ColumnVisualization that is bound to the Value of the RadColumnSparkline.
Please let me know if you have solution for that.
Thanks,
Basam

[Tsvetie]

Hi Basam,

The code that you have posted tries to set a tooltip for the RadTimeBar control and not for the ItemControl controls. The DataContext of the RadTimeBar control may or may not have a StartDate property.

I tested our ColumnVisualization demo with the Style Setter that Petar Marchev suggested and I got a tooltip for every ItemControl instance in the RadTimeBar control. Here is the complete RadTimeBar definition from the demo with suggested Style:

<Grid x:Name="LayoutRoot">
    <telerik:RadTimeBar Height="{StaticResource TimeBarHeight}" VerticalAlignment="Top" Margin="6"
                        IsSnapToIntervalEnabled="True"
                        EnableSparklineVirtualization="False"
                        PeriodStart="1-Jan-2010" PeriodEnd="1-Jan-2012"
                        VisiblePeriodStart="11-Nov-2010" VisiblePeriodEnd="15-Mar-2011"
                        SelectionStart="03-Jan-2011" SelectionEnd="17-Jan-2011">
        <telerik:RadTimeBar.Resources>
            <Style TargetType="telerik:ItemControl" BasedOn="{StaticResource ItemControlStyle}">
                <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding DataContext.StartDate, RelativeSource={RelativeSource Self}}" />
            </Style>
        </telerik:RadTimeBar.Resources>
        <telerik:RadTimeBar.Intervals>
            <telerik:YearInterval />
            <telerik:MonthInterval />
            <telerik:WeekInterval />
            <telerik:DayInterval />
        </telerik:RadTimeBar.Intervals>

        <telerik:RadColumnSparkline ItemFill="#FFD6D4D4" ItemsSource="{Binding ColumnData}" XValuePath="Date" YValuePath="Value" ColumnWidthPercent=".8" />
    </telerik:RadTimeBar>
</Grid>

Please note that our demos use NoXaml DLLs. For additional information on NoXaml DLLs and RadControls for Silverlight support for implicit Styles, please refer to our online documentation.

Regards,
Tsvetie
Telerik