Help with TimeLine Control

[Adam]

Hello,
We've recently ran across the new time line control and want to implement that into our current project. I'm having a bit of trouble getting started though and was hoping for some assistance.

A little background: I'm going to have to build the timeline in the code behind as I'm going to have multiple timelines inside a single user control but I don't have a definitive count.

A basic project displaying the setup and binding the timeline control via code behind would be very helpful and appreciative.

Thanks,
Adam

[Tsvetie]

Hi Adam,

You should have no problems creating a RadTimeline control in code-behind - simply create the control and set the properties that you want to set, e.g. PeriodStart, PeriodEnd, ItemsSource, etc. You can find additional information about the properties of the control in our online documentation.

In case you run into any problems, while creating your timeline controls dynamically, just post your code here and explain in detail the result that you get and the one that you expect.

Kind regards,
Tsvetie
the Telerik team

[Adam]

Hi Tsvetie,
I'm having some issue actually seeing anything when I create. If I just add the timeline, periodstart, periodend, visible start and end as well as the intervals, shouldn't I at least see the date ranges in the timeline? I do the following and I see the timeline but no date ranges at the top..I can do the same below in XAML and I see the date ranges. What am I missing here?

RadTimeline timeLine = new RadTimeline();

timeLine.PeriodStart = new DateTime(2012, 2, 1);
timeLine.PeriodEnd = new DateTime(2012, 5, 1);
timeLine.VisiblePeriodStart = new DateTime(2012, 2, 1);
timeLine.VisiblePeriodEnd = new DateTime(2012, 2, 15);
timeLine.Intervals.Add(new MonthInterval());
timeLine.Intervals.Add(new WeekInterval());
timeLine.Intervals.Add(new DayInterval());               

LayoutRoot.Children.Add(timeLine);

[Tsvetie]

Hi Adam,

You have to call the BeginInit and EndInit methods. For example: 

RadTimeline timeLine = new RadTimeline();
timeLine.BeginInit();

timeLine.Height = 300;

timeLine.PeriodStart = new DateTime(2012, 2, 1);
timeLine.PeriodEnd = new DateTime(2012, 5, 1);
timeLine.VisiblePeriodStart = new DateTime(2012, 2, 1);
timeLine.VisiblePeriodEnd = new DateTime(2012, 2, 15);

timeLine.Intervals.Add(new MonthInterval());
timeLine.Intervals.Add(new WeekInterval());
timeLine.Intervals.Add(new DayInterval());

timeLine.EndInit();

LayoutRoot.Children.Add(timeLine);

You can read more about ISupportInitialize in MSDN. Kind regards,
Tsvetie
the Telerik team

[Adam]

Ah! Gotcha. Thanks!! One last question. How about setting the StartPath and DurationPath to do some testing if you don't have a datasource set up for the TimeLine yet?

[Adam]

OK, I got the StartPath and DurationPath values set for my TimeLine. I now have one more question. A sample of my data is as follows:

StartDate - 2/1/2012
Estimated Completion Date - 5/1/2012
Actual Completion Date - 5/21/2012

Is there a way in the RadTimeLine to show each of these values? I know I can do the StartDate and Estimated Completion Date as I can set my StartPath = Startdate and DurationPath = Estimated Completion Date. But what about the Actual Completion Date? I'd like for it to show as an item without a duration, i.e. the diamon image that's on the RadTimeLine.

I'd like for all points to be on the same line inside the RadTimeLine but it's not a show-stopper if the Actual Completion Date falls to the line below the StartDate/Estimated Comp Date line.

Thanks,
Adam

[Adam]

I seem to be running into an issue wiht setting the PeriodStart/PeriodEnd and the VisualPeriodStart/VisualPeriodEnd when my RadTimeLine has an itemsource.

For some reason when I set the PeriodStart and/or PeriodEnd, it automatically sets the VisualPeriodStart = PeriodStart and the VisualPeriodEnd = PeriodEnd.

Shouldn't I be able to set the visual start/stop to something different from the period start/stop?

My code:

RadTimeLine rtl = new RadTimeLine();
rtl.BeginInit();

rtl.ItemsSource = from rs in ResetSystem.......select new ClassName()
{ ScheduledInductionDate = rs.ScheduledInductionDate,
  EstimatedCompletionDate = rs.EstimatedCompletionDate,
  ResetDuration = (Estimated - Scheduled)
}

rtl.PeriodStart = DateFromClass;
rtl.PeriodEnd = DateFromClass;

rtl.VisiblePeriodStart = rtl.PeriodStart.AddDays(-60);
rtl.VisiblePeriodEnd = rtl.PeriodEnd.AddDays(60);

[Tsvetie]

Hello Adam,

Regarding your question about the visible period settings - we define the visible period as a sub-period of the whole period. The idea is that the timeline represents a certain period of time (the whole period) and at any point, the timeline shows part of this period (the visible period). That is why, in case VisiblePeriodStart is less than PeriodStar, the value is corrected to PeriodStart. The same applies to VisiblePeriodEnd. I hope that makes sense.

Now, about the Actual Completion Date - in case you want to show it as an event with no duration in the timeline, you will have to modify the ItemsSource. That is, add the Actual Completion Date as a separate event with no duration in the ItemsSource.

All the best,
Tsvetie
the Telerik team

[Adam]

Hi Tsvetie,
Thank you for the clarification on the TimeLine VisibleStart vs PeirodStart values and why I encountered the behavior that I did.

I believe I've gotten everything I need with the exception of how to add a new event without duration to the TimeLine. As far as your comment about adding the Actual Completion, I'm a little confused by your statement about modifying the ItemsSource. the Actual Completion Date is a separate event with no duration, i.e. it's a static date. My question is how would I add a separate event to the TimeLine since I currently have the TimeLine set up as so:

rtl.StartPath = "ScheduledInductionDate";
rtl.ToolTipPath = "ScheduledInductionDate";
rtl.DurationPath = "ResetDuration";  

Thanks for all your help!
Adam

[Adam]

Hi Tsvetie,
I've figured out the question that I had about adding the Actual Completion Date as an event without a duration to my TimeLine. However, I'd really like to know if I can have the duration based event on the same line as the non-duration event. I've included an example picture of what I'm currently getting and basically I'd like the red rectangle on the same line as the long gray rectangle shape.

Thanks,
Adam

[Adam]

OK, So going back and reading some other posts about the TimeLine and event placement, I see that the events can't touch or overlap and that's why mine are on different lines. If there's no way to override that then I may have to look at a different control.

Can you recommend another control that I can use to depict dated events?

Thanks,
Adam

[Tsvetie]

Hello Adam,

Indeed, you are correct. The timeline control arranges the events so that these do not overlap. 

As I am not familiar with your scenario, I cannot be sure whether the control fits your requirements, but I can suggest that you review our GanttView. Here are links to our online demos and documentation.

Greetings,
Tsvetie
the Telerik team

[Adam]

Hi Tsvetie,

After doing some more reading and test coding, I believe the RadTimeLine is what I'll be able to use after all. I do have one last question and I believe I'll have everything I need to move forward.

Is there a way to add multiple item templates for the instant items and set the template dynamically? I'd like to be able to have a couple of different instant items on a single timeline (along with a duration based item) and differentiate the two instant items by color.

Thanks,
Adam

[Tsvetie]

Hello Adam,

You can use the ItemTemplateSelector to set the template dynamically. Have a look at the following online demo for reference - http://demos.telerik.com/silverlight/#Timeline/TimelineItemTemplate.

Greetings,
Tsvetie
the Telerik team

[Mike]

I've got a really, well, stupid problem. I can't even force Timecontrol to most basic interaction. I don't see any events, I don't see even date ranges on top.

My xaml:

<telerik:RadTimeline PeriodStart="{Binding StartDate, Mode=TwoWay}"
                     PeriodEnd="{Binding EndDate, Mode=TwoWay}"
                     StartPath="StartDate"
                     DurationPath="Duration"
                     ItemsSource="{Binding Events}">
    <telerik:RadTimeline.Intervals>
        <telerik:YearInterval />
        <telerik:MonthInterval />
    </telerik:RadTimeline.Intervals>
</telerik:RadTimeline>

My view model:

StartDate = new DateTime(2000, 1, 1);
EndDate = new DateTime(2010, 1, 1);

Events.Add(new LifeEvent()
{
    StartDate = new DateTime(2002, 1, 1),
    EndDate = new DateTime(2204, 1, 1),
    Details = "Bla, bla, bla"
});

NotifyPropertyChange(() => Events);

[Tsvetie]

Hi Mike,

I am not sure what could be causing the problem in your case. I created a simple test page, based on the code fragments you provided, but the timeline showed as expected. I have attached my code for your reference.

In case the problem persists, please open a formal support ticket and send me a simple running project, demonstrating the problem you have.

All the best,
Tsvetie
the Telerik team