Static icons on TimeLine

5 posts, 0 answers
  1. Alexander
    Alexander avatar
    8 posts
    Member since:
    Sep 2018

    Posted 18 Apr 2019 Link to this post

    We have a Timeline that is being used to display different types of data, grouped by collector. We would like to somehow have icons on the left side of the Timeline to help identify the different data types, that would remain in place as the Timeline is scrolled horizontally, and would collapse and expand with the group, similar to the following mock up. Can such a thing be accomplished? We assume it would involve editing the TimelineItemGroupControl ControlTemplate, but we are unsure of how exactly this would be done.

  2. Alexander
    Alexander avatar
    8 posts
    Member since:
    Sep 2018

    Posted 18 Apr 2019 Link to this post

    The mock up images failed to attach to the main post.
  3. Dinko
    Admin
    Dinko avatar
    1078 posts

    Posted 23 Apr 2019 Link to this post

    Hello Alexander,

    Thank you for the provided images.

    This behavior is not supported out of the box from the RadTimeline control. You could try to achieve this using custom code. You are in the right direction by modifying the TimelineItemGroupControl default template. In the default template of this element, the items are held by an ItemsPresenter with x:Name Content. We can set its Margin property to create a space for the icons. Then you can place a StackPanel on the left side and bind its Visibility property to the IsExpanded of the TemplatedParent. This way when the group is collapse also the panel will be hidden. Inside the StackPanel you can place an ItemsControl. You can bind its ItemsSource property using an IValueConverter class. The rest of the logic can be create in the Convert() method. Basically, the DataContext of the ItemsControl is a TimelineDataItemGroup element. You can get how much rows you have in one group from the DataGroups collection property. You can also get all the items in this group. 

    I have created a sample project which demonstrate the above steps. Keep in mind that this is a custom solution and may not work in all cases. For example when the Window is resize the space between the rows is increase/decrease. You could try to implement additional logic which changes the space between the icons. Still I think this is a good starting point for achieving your final behavior.
     
    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Alexander
    Alexander avatar
    8 posts
    Member since:
    Sep 2018

    Posted 25 Apr 2019 Link to this post

    Thank you for the reply. We will take this feedback into account and may end up using this method to implement the icons that we want. If we end up implementing this successfully, I will post our solution below to benefit others who desire this functionality.

    Meanwhile, is it possible that such a functionality could be added to the RadTimeline natively in the future? I imagine the ability to provide this kind of identification for items on the timeline could be quite useful. From what I recall, the RadGanttView has a similar kind of feature. We would utilize this, but we have other reasons that make the Timeline a superior choice for us currently.

  5. Dinko
    Admin
    Dinko avatar
    1078 posts

    Posted 30 Apr 2019 Link to this post

    Hello Alexander,

    We have not planned such improvements at the moment but you can log a feature request in our Feedback Portal and if it gathers enough votes we can implement it.

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Back to Top