Customizing data with duration

[Douglas]

Hi,

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
Doug

[Tsvetie]

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:

<Window.Resources>
    <DataTemplate x:Key="InstantItemTemplate">
        <Border Width="10" Height="10" Margin="0,0,0,5">
            <Rectangle Height="7"
                    Width="7"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Fill="Red">
            </Rectangle>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="ItemWithDurationTemplate">
        <Border Height="10" Margin="0, 0, 0, 5">
            <Rectangle Height="7"
                        VerticalAlignment="Center"
                        Fill="Green"/>
        </Border>
    </DataTemplate>
</Window.Resources>

<Grid>
    <telerik:RadTimeline x:Name="RadTimeline1"
                            Height="300"
                            PeriodStart="2011/01/01" PeriodEnd="2011/06/01"
                            VisiblePeriodStart="2011/01/01" VisiblePeriodEnd="2011/01/15"
                            StartPath="EventStartDate"
                            DurationPath="EventInterval"
                            TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}"
                            TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}"
                            ItemsSource="{Binding AllItems}">
        <telerik:RadTimeline.Intervals>
            <telerik:DayInterval />
            <telerik:WeekInterval />
            <telerik:MonthInterval />
            <telerik:YearInterval />
        </telerik:RadTimeline.Intervals>
    </telerik:RadTimeline>
</Grid>

Greetings,
Tsvetie
the Telerik team

[Douglas]

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.
Doug