How to draw connections between two timeline items

7 posts, 1 answers
  1. Jie
    Jie avatar
    4 posts
    Member since:
    Jun 2017

    Posted 29 Jun Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    771 posts

    Posted 04 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Jie
    Jie avatar
    4 posts
    Member since:
    Jun 2017

    Posted 04 Jul in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    771 posts

    Posted 07 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Jie
    Jie avatar
    4 posts
    Member since:
    Jun 2017

    Posted 09 Jul in reply to Stefan Link to this post

    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

  6. Answer
    Stefan
    Admin
    Stefan avatar
    771 posts

    Posted 12 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  7. Jie
    Jie avatar
    4 posts
    Member since:
    Jun 2017

    Posted 13 Jul in reply to Stefan Link to this post

    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

Back to Top