Overlay Instant Items over Duration Items

6 posts, 0 answers
  1. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 19 Dec 2012 Link to this post

    I saw that this was discussed in other threads, but my scenario is a bit different.  Rather than combine/group timeline items with a duration, I am trying to overlay Instant Items over top Duration Items.
    Is there a way to accomplish this as depicted in the attached screen shot?
    The gray bars would be items with a duration, but on top of that would be icons (highlighted with red squares) depicting instant events that have no duration.


  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 21 Dec 2012 Link to this post

    Hi Josh,

    In short - no, you cannot configure the RadTimeline control so that all instant items overlay all items with duration.

    In case I understand your scenario correctly, every instant item that you want to overlay an item with duration is actually connected to this item with duration - it is for the same person, please correct me if I am wrong. In this case, you can use the solution that we demonstrate in our First Look demo. You can use one business object for every person that contains all the information for this person, including log in and check in information. That way, the timeline control will show a single item with duration for every person. Then, you can use the information in the business object to build a DataTemplate for that item with duration that visualizes the information per your requirements - the "check-in"/"log-in" XAML in this case is part of the DataTemplate for the single timeline item with duration that you will get for every person.

    Kind regards,
    Tsvetie
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 21 Dec 2012 Link to this post

    I see how I could use a DataTemplate to show one instant item at the beginning of a duration item, but in my scenario, I may have several instant items associated with a duration item.  I don't see a way to display multiple icons, each with a different StartTime, within the DataTemplate for a single duration item.  I could perhaps set up a grid within the DataTemplate and approximate width based on time between events, but this defeats the ease of using StartTimes to lay out events in the timeline.

    Any other suggestions?  If not, I may have to rethink my layout to show items as stacked on top of each other.

    Thanks,
    Josh
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Dec 2012 Link to this post

    Hello Josh,

    In this case, could you please provide additional details about the events with duration in your case? In the image that you sent with your first post, I can see that there is an item with duration for every person. Could you please explain how you determine the start and end of these items with duration?

    You might be able to used annotations for the items with duration in your case, but I cannot be sure, unless I have a more detailed overview of your scenario.  Here is some additional information about RadTimeline annotations support:

    Kind regards,
    Tsvetie
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 27 Dec 2012 Link to this post

    Thanks for the reply, Tsvetie.

    I don't think Annotations will work in my scenario because I don't see a way to set a Group for an Annotation.  Each TimelineItem with a duration needs to show only for its specific group.

    In my scenario, I will be displaying several Groups in the timeline and each group will have both duration items and instant items.  The instant items may or may not overlap the duration items.  I'd like the duration items to work almost like a background color for that group (although I want to use an ItemTemplate so I can apply a style and tooltip to the duration items).  I played around with negative margins to try to achieve the desired result, but the problem is that I don't know how many items may be stacked at a single point in time, so I won't know how far to increase the negative margin to get things to overlap.

    It seems like annotations would be ideal since they don't take up vertical space like regular timeline items, but the missing Group property is the problem there.

    I have attached a new screenshot with my current version of the RadTimeline.
    The first two groups are how it looks in the application, but I modified the last (702) group to look the way I WANT it to look, with the gray duration items filling the vertical space of the group and showing underneath any instant items that may appear along the same time (the blue circles and green rectangles are all instant items without any duration set)

    Thanks for your help!
    Josh

  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 31 Dec 2012 Link to this post

    Hello Josh,

    Yes, you are correct - timeline annotations cannot be added for specific groups. Basically, you can specify a fixed height and offset from the top of the timeline for an annotation, but you mentioned that this will not work for you. I will forward your feedback regarding the annotations to our developers.

    In case you simply want to apply different background to the different groups of timeline items, you can edit the template of the TimelineItemGroupControl.

    On the other hand, in case you have sections in a group of timeline items that you want to color, there is no simple way to achieve this. You can, for example, edit the template of the TimelineItemGroupControl to add your custom ItemsControl that shows these colored sections.

    Kind regards,
    Tsvetie
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner