combine timebar and timeline

6 posts, 0 answers
  1. Marco
    Marco avatar
    4 posts
    Member since:
    May 2013

    Posted 28 May 2013 Link to this post

    Hello Telerik Team,

    I am working on a project needing features from both timebar and timeline. I want to use timebar to select a range of timespan from a timeline. I was able to embed timeline element into a timebar element, but the problem is the redundant display issues:
    -Both timebar and timeline have scrollbar themselves
    -Both timebar and timeline have date/time display on their top

    Please help me to remove these redundant display parts. See attachment image for further info.

    Thanks!

    -Marco
  2. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 30 May 2013 Link to this post

    Hello Marco,

    I have attached a project that demonstrates how you can remove the second line of intervals and the second slider.

    Regards, Rosko
    Telerik

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Victor
    Victor avatar
    3 posts
    Member since:
    Sep 2012

    Posted 18 Jan 2014 Link to this post

    Hi,


    I followed the example provided and when the Timeline is a child of the Timebar all seems to work properly. The only issue that I came across was I could not select any of the Timeline items and get the SelectedItemChanged event back in my code.



    Is there a way to have the Timebar allow the item selection on the Timeline raise the changed event with the selected item?



    Thanks,

    Victor

  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 22 Jan 2014 Link to this post

    Hello Victor,

    I am not quite sure I understand your idea and how you expect the two controls to behave. Basically, you can see the timeBar interval item change color when you hover over it, indicating that this item will be selected. Do you expect both the timeBar interval item and the timeline item to change color when the mouse is over both of them? If this is the case, I cannot think of a way to customize the controls to work in such a way. However, I do not think this would be intuitive for the clients as well.

    What I can offer you, is to edit the template of the RadTimeBar control and make only the header of theRadTimeBar interval items selectable. Thus, you will be able to select an interval only when interacting with the interval headers and select RadTimeline items in the content area of the RadTimeBar.

    In order to make that change to the Styles of the RadTimeBar, all you need to do is find the PART_ItemContainer in the RadTimeBar template and change its Grid.RowSpan from 3 to 1. For example:
    <telerik:ItemContainer x:Name="PART_ItemContainer" Grid.Row="0" Grid.RowSpan="1"
                        Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                        ItemsSource="{TemplateBinding IntervalItems}"
                        ItemHeaderStyle="{TemplateBindingPeriodHeaderStyle}">

    You can find additional information of editing control templates in 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 >>



    Regards,
    Tsvetie
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    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 >>
  6. Victor
    Victor avatar
    3 posts
    Member since:
    Sep 2012

    Posted 22 Jan 2014 Link to this post

    Hello Tsvetie

    The solution provided worked perfectly. I can now select a range using the Timebar and add items to the Timeline. I can now just select an item in the timeline and the timeline selection changed event is raised.

    I have one more issue. I have set both Timebar and Timeline Intervals to the desired settings. When I specify te start and end properties of the controls I get the time display on both controls. What I would like to do is hide the timelines interval display and only show the timebars display. Is there a way to do this?

    Thanks,
    Victor
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Jan 2014 Link to this post

    Hello Victor,

    In case I am not mistaken, this is exactly what the application that Rosko attached earlier to this thread demonstrate. I have attached a screenshot of the result I get when I apply both his suggestion and mine. Could you please check the attached screenshot and explain in detail the changes that you want to make to it?

    Regards,
    Tsvetie
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    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
DevCraft banner