Display time slice tooltip information

13 posts, 0 answers
  1. Patrick
    Patrick avatar
    55 posts
    Member since:
    Jun 2008

    Posted 23 May 2011 Link to this post

    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.
  2. Missing user
    Missing user avatar

    Posted 27 May 2011 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Patrick
    Patrick avatar
    55 posts
    Member since:
    Jun 2008

    Posted 27 May 2011 Link to this post

    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.
  5. Missing user
    Missing user avatar

    Posted 02 Jun 2011 Link to this post

    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
  6. Patrick
    Patrick avatar
    55 posts
    Member since:
    Jun 2008

    Posted 03 Jun 2011 Link to this post

    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.
  7. Carlos
    Carlos avatar
    6 posts
    Member since:
    Sep 2010

    Posted 03 Jan 2012 Link to this post

    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?
  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Jan 2012 Link to this post

    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 >>

  9. Basam
    Basam avatar
    3 posts
    Member since:
    Nov 2011

    Posted 01 Aug 2013 Link to this post

    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
  10. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 05 Aug 2013 Link to this post

    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 >>
  11. Basam
    Basam avatar
    3 posts
    Member since:
    Nov 2011

    Posted 07 Aug 2013 Link to this post

    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>

  12. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 09 Aug 2013 Link to this post

    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 >>
  13. Basam
    Basam avatar
    3 posts
    Member since:
    Nov 2011

    Posted 09 Aug 2013 Link to this post

    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
  14. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Aug 2013 Link to this post

    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 >>
Back to Top
UI for WPF is Visual Studio 2017 Ready