How to draw connections between two timeline items

[Jacory]

Hi, 

I'm using the RadTimeLine control. I want to draw a connection between two timeline item, just like the following figure shows. Is there any way to do that?

I know it's easy to do with RadGanttView. But the RadTimeLine  is more flexible than RadGanttView. For some reason this must be implemented in the RadTimeLine.

Hope for reply!

 

Best regards,

Jie

[Stefan]

Hi Jie,

Such mechanism is not available out-of-the-box for RadTimeLine. Can you please clarify whether you have checked the RadGantView control, as I guess it might be suitable for your requirement?

Best Regards,
Stefan X1
Progress Telerik

[Jacory]

Hi Stefan X1,

Thanks for your reply.
There are some other requirements that are difficult to achieve in RadGanttView. For example:
1.In RadTimeLine, all the timeline items can be assigned to different groups, and all the timeline items of the same group can be displayed in same row, while different items must be displayed in different rows in RadGanttView.
2.In RadGanttView, the gantt item can only be horizontal dragged to adjust the time. I need to drag gantt item across the row vertically to switch the group it belongs to.  It's easy to do with RadTimeLine.

 

Best regards,
Jie

[Stefan]

Hi Jie,

Thanks for the clarification.

As stated in my previous reply, such functionality is not available out-of-the-box for RadTimeLine. A possible solution for implementing such customization would be to use the ConvertPointToDateTIme method exposed by the control. Basically, through it you can convert screen coordinates to a DateTime value. Please note, that this is a customization of the control. I cannot confirm that a solution working as expected in all scenarios can be implemented.

Hopefully, this helps.

Best Regards,
Stefan X1
Progress Telerik

[Jacory]

Hi Stefan X1,

Thanks for your reply.

ConvertPointToDateTime method can convert screen coordinates to a DateTime value, while I need to get coordinate by DateTime or a timeline item. I know this is not available out-of-the-box for RadTimeLine either. So I try to get the x-coordinate and the y-coordinate respectively. And now there are two other questions:

1. About X-coordinate. I use the following code to calculate the x-coordinate value, but there are always errors in the calculation results when ConvertPointToDateTime method was used to check the result. As to this example, the value of test datetime "dt" is 2011/6/1 0:00:00 while the value of "dtpos" is 2011/6/1 8:13:03. I don't know where the deviation come from. Is ActualWidth can't be used as the effective width？

private void RadButton_Click(object sender, RoutedEventArgs e)
{
    var dt = new DateTime(2011, 6, 1, 0, 0, 0);     // an example for test.
    var pointX = GetCoordinateX(dt);
    var dtpos = this.timelineControl.ConvertPointToDateTime(new Point(pointX, 80));
}

private double GetCoordinateX(DateTime dt)
{
    var width = this.timelineControl.ActualWidth;
    var pStart = this.timelineControl.PeriodStart;
    var vStart = this.timelineControl.VisiblePeriodStart;
    var vEnd = this.timelineControl.VisiblePeriodEnd;
    var ratio = dt.Subtract(pStart).TotalSeconds / vEnd.Subtract(vStart).TotalSeconds;
    return width * ratio;
}

Here is the xaml code:

<telerik:RadTimeline x:Name="timelineControl"

                     PeriodStart="2011-01-01"

                     PeriodEnd="2012-01-01"

                     VisiblePeriodStart="2011-01-01"

                     VisiblePeriodEnd="2011-02-01"

                     StartPath="StartDate"

                     DurationPath="Duration"

                     GroupPath="GroupName"

                     GroupExpandMode="None"

                     ItemsSource="{Binding TimelineItems}">

    <telerik:RadTimeline.Intervals>

        <telerik:YearInterval />

        <telerik:MonthInterval />

        <telerik:WeekInterval />

        <telerik:DayInterval />

    </telerik:RadTimeline.Intervals>

</telerik:RadTimeline>

2. About Y-coordinate. I did not find a right way to get the y-coordinate value. I can't find any information about position in timeline item.

Is there any other way to do it? Hope for your advice.

 

Best regards,
Jie

[Stefan]

Hello Jie,

There is no built-in method for getting the needed Point from a DateTime value. You can, however, use some custom calculations as discussed in this reply from the Displaying a vertical line for the current time forum thread.

As for the Y value, a possible approach would be to use an IItemRowIndexGenerator. You can take a look at the TimeLineRowIndex SDK Example as it demonstrates its usage. Basically, through it you can update the needed data in the view model. You will also need to add the row Height of the control to your calculations. To achieve this, you will need to traverse the visual tree to get access to a given row.

Another approach would be to use one of the suggestions discussed in the Get absolute position of element within the window in wpf StackOverflow thread.

Regards,
Stefan X1
Progress Telerik

[Jacory]

Hi Stefan X1,
Thanks for your advice.

I can get the coordinates I need with the method you mentioned last. Now my requirement can be achieved.

Regards,

Jie

[Tony]

I think this would be a fantastic feature also.  Maybe a double headed arrow to show the span between timeline items.  Or a hashed rectangle or even what the user want's it to be.

 

[Stefan]

Hello Tony,

Thank you for your feedback.

Speaking in general, the component that we recommend for such requirements is the RadGanttView one. The approach discussed in this thread is more related to a customization of the RadTimeLine control. Nevertheless, can you please share your expectations on how the control should behave with such built-in feature in a grouped scenario, for example. If you can provide as with some more generic use-cases in which such feature would improve the usability of the control, we will consider logging it as a feature request. Also, can you please verify that the RadGantView would not be applicable for your scenario?

Regards,
Stefan
Progress Telerik