RadTimeline Questions

[Curren]

I am using WPF to build out the mockup shown in the attached image. I wanted to know if the RadTimeline control can be used to build it faster. 

• General: I saw this post and this other post asking related questions. Has the control changed significantly since then?
• Group Labels: I saw the world cup demo that has the group labels in the timeline. This works but takes up valuable vertical space for me. What would be the best way to have the label on the same row (before the items) as shown in the mockup?
• Adding New Items: Clicking the "plus" buttons adds a new item to the timeline row. I was going to use milestones and handle the click event. Is there a better way?
• Vertical Line: The vertical line moves if a user clicks in an empty region within the timeline control. Would I need to implement it as described in this thread or is there a simpler way now? Can you get the time directly from a click event?
• Drag/Reorder: Is it possible to reorder the items in a row by dragging and dropping them? Is this method still the best solution?
• Item Width: Currently, the item width is changed by changing the "duration" properties in the pane below the timeline. Would it possible to have users change the item width directly in the timeline?
• Item Coloring: The green region in each item indicates it's progress. Hence it is a different width for each item. I am assuming that this can be achieved using the ItemTemplateSelector. Is that correct?

Any other suggestions or tips that might help me?

Thanks!

[Martin Ivanov]

Hi Curren,

I will contact you tomorrow with more information on the matter.

Regards,
Martin
Telerik

[Martin Ivanov]

Hi Curren,

Let me get straight to your questions.

• General - No, the control haven't changed much since the time those posts were replied.
• Group Labels - Currently, the group headers (the labels) cannot be positioned outside the timeline control. To achieve this effect you can write custom code. For example, you can hide the default headers and then position a Canvas panel at the right side of the timeline. You can create custom controls that will display the headers and position them in the Canvas panel based on the groups in the timeline. You can find this approach demonstrated in the attached project.
• Adding New Items - I am not sure what you mean by milestones so I can't tell if this approach is good. However, to achieve the desired effect I can suggest you several approaches.
  - As I can see the timeline items are quite custom so you will need to use item template. In this case you can add the button with the "plus" character in the template and determine its Visibility by a property from the view model of the item. Basically, if this is the last item in the row display the button.
  - Another approach is to add the "plus" button at another position. For example, in the group header or  at the end of the timeline control, after its right border.
  - The final approach I could think of is to add the "plus" button in a new item at each row and position it after all other items.
• Vertical Line - Few Qs back we exposed a ConvertPointToDateTime() method which you can use to update the line's position based on the mouse coordinates. Also, you can use an annotation to draw the line.
• Drag/Reorder - RadTimeline still doesn't support drag and drop functionality out of the box. Currently, if you want such behavior you will need to implement it as explained in the forum. Besides the approach with DragDropManager, this can be implemented also using the mouse events of the timebar and its items - MouseMove, MouseLeftButton, etc.
• Item Width - I guess you want some kind of dragging resize. RadTimeline doesn't have built-in resizing mechanism for its items, but you can implement such using similar approach as the one with the drag/drop functionality. Basically, you can subscribe for the item mouse or DragDropManager events and based on the mouse position update the duration of the item.
• Item Coloring - Yes, this is a possible approach. Another way to do this is to bind the width to a property from the item's view model. Or you can use a progress control to display the progress and bind its value property.

I prepared a small example that covers most of the requirements from the mock up picture. I hope this is a good starting point for achieving your requirement. However, keep in mind this is a custom solution and I cannot guarantee that it will work in all expected scenarios. This is why I recommend you to test it well and modify it so that it fits in your implementation.

Regards,
Author nickname
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.

 

[Curren]

Thanks a lot for the detailed reply!

[Martin Ivanov]

Hello Curren,

I am following up my post to suggest you to take a look also at our GanttView control which has some of your requirements built in the component. You can find more information in our help documentation, demos and SDK examples.

Regards,
Martin
Telerik