Customizing data with duration

3 posts, 1 answers
  1. Douglas
    Douglas  avatar
    10 posts
    Member since:
    Sep 2011

    Posted 20 Mar 2012 Link to this post


    I'm getting into the Timeline and trying to customize the timeline data item templates. I have been through your examples and understand that there are instant items (without duration) and timeline items with a duration. I can customize the instant items as per the example with the template selector or by setting either the TimelineInstantItemTemplate or TimelineItemTemplate .

    I would however like to customize the duration items (initially to say turn the duration bar red in some circumstances), but want the template to still render itself in the correct position across the time span etc.

    I cant seem to get anywhere with this, have you got a small example you could share with me that lets me do that to point me in the right direction.. The instant items are ok, it's the timelineitems i'm struggling with.

    Thanks for your help
  2. Answer
    Tsvetie avatar
    1517 posts

    Posted 21 Mar 2012 Link to this post

    Hello Doug,

    Basically, you can change the template for the items with duration in the same manner as the template for the instant items - either with the ItemTemplateSelector, or with a property. You can review the code of our CustomItemTemplate demo for the approach with the selector.

    Regarding the properties - the TimelineItemTemplate property sets the DataTemplate for items with duration and the TimelineInstantItemTemplate sets the DataTemplate for instant items. For example:

        <DataTemplate x:Key="InstantItemTemplate">
            <Border Width="10" Height="10" Margin="0,0,0,5">
                <Rectangle Height="7"
        <DataTemplate x:Key="ItemWithDurationTemplate">
            <Border Height="10" Margin="0, 0, 0, 5">
                <Rectangle Height="7"
        <telerik:RadTimeline x:Name="RadTimeline1"
                                PeriodStart="2011/01/01" PeriodEnd="2011/06/01"
                                VisiblePeriodStart="2011/01/01" VisiblePeriodEnd="2011/01/15"
                                TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}"
                                TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}"
                                ItemsSource="{Binding AllItems}">
                <telerik:DayInterval />
                <telerik:WeekInterval />
                <telerik:MonthInterval />
                <telerik:YearInterval />

    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft R3 2016 release webinar banner
  4. Douglas
    Douglas  avatar
    10 posts
    Member since:
    Sep 2011

    Posted 21 Mar 2012 Link to this post

    Thanks this is exactly what I was looking for. My error was in my overly complicated data template which simple couldn't stretch over the entire duration and was instead placed in the middle of the range for the timelineItems. I had convinced myself I was on the wrong track. 

    Thanks again, this is a really nice control.
Back to Top