This is a migrated thread and some comments may be shown as answers.

Display time slice tooltip information

12 Answers 148 Views
TimeBar
This is a migrated thread and some comments may be shown as answers.
Datafyer
Top achievements
Rank 1
Veteran
Datafyer asked on 24 May 2011, 03:08 AM
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.

12 Answers, 1 is accepted

Sort by
0
Missing User
answered on 27 May 2011, 07:27 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Datafyer
Top achievements
Rank 1
Veteran
answered on 27 May 2011, 04:02 PM
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.
0
Missing User
answered on 02 Jun 2011, 11:14 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Datafyer
Top achievements
Rank 1
Veteran
answered on 03 Jun 2011, 09:49 PM
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.
0
Carlos
Top achievements
Rank 1
answered on 03 Jan 2012, 09:36 AM
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?
0
Tsvetie
Telerik team
answered on 06 Jan 2012, 12:37 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Basam
Top achievements
Rank 1
answered on 01 Aug 2013, 06:02 PM
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
0
Petar Marchev
Telerik team
answered on 05 Aug 2013, 07:15 AM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Basam
Top achievements
Rank 1
answered on 07 Aug 2013, 06:26 PM
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>

0
Petar Marchev
Telerik team
answered on 09 Aug 2013, 09:58 AM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Basam
Top achievements
Rank 1
answered on 09 Aug 2013, 02:53 PM
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
0
Tsvetie
Telerik team
answered on 14 Aug 2013, 12:08 PM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
TimeBar
Asked by
Datafyer
Top achievements
Rank 1
Veteran
Answers by
Missing User
Datafyer
Top achievements
Rank 1
Veteran
Carlos
Top achievements
Rank 1
Tsvetie
Telerik team
Basam
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or