Customizing Items

There are two ways you can change the template for the RadTimeline items. You can either customize them with the use of ItemTemplateSelector, or with a TimelineItemTemplate / TimelineInstantItemTemplate property. This help article will walk you through these two approaches:

TimelineItemTemplate and TimelineInstantItemTemplate

The items with duration can be customized in the same manner as the instant items. To shed more light on the difference between these two items types, you may check the DataBinding topic.

The following example demonstrates how you can add custom Framework Element (Rectangle in this case) to present the instant and duration items. The customizations are made via DataTemplate and applied to the corresponding TimelineItemTemplate/TimelineInstantItemTemplate property in XAML. There is nothing special in code-behind, it is added for completeness of the sample.

 <UserControl.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> 
    </UserControl.Resources>    
 
     <Grid x:Name="LayoutRoot" Background="White" Height="250" Width="750"> 
        <telerik:RadTimeline x:Name="RadTimeline1" 
                    Margin="6" 
                    VerticalAlignment="Top" 
                    PeriodStart="2011/01/01" PeriodEnd="2011/06/01" 
                    VisiblePeriodStart="2011/01/01" VisiblePeriodEnd="2011/03/22" 
                    StartPath="Date" 
                    DurationPath="Duration" 
                    TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}" 
                    TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}">            
            <telerik:RadTimeline.Intervals> 
                <telerik:DayInterval /> 
                <telerik:WeekInterval /> 
                <telerik:MonthInterval /> 
                <telerik:YearInterval /> 
            </telerik:RadTimeline.Intervals> 
        </telerik:RadTimeline> 
    </Grid> 

    List<Item> dataSource = new List<Item>(); 
    var startDate = new DateTime(2011, 1, 1); 
    var endDate = new DateTime(2011, 6, 1); 
 
    Random r = new Random(); 
    for (DateTime i = startDate; i < endDate; i = i.AddMonths(1)) 
    { 
        dataSource.Add(new Item() { Date = i, Duration = TimeSpan.FromDays(r.Next(50, 100)) }); 
    } 
 
    for (int i = 0; i < 15; i++) 
    { 
        dataSource.Add(new Item() { Date = startDate.AddMonths(r.Next(0, 5)).AddDays(15)}); 
    } 
    RadTimeline1.ItemsSource = dataSource; 
 
    public class Item 
    { 
        public TimeSpan Duration { get; set; } 
        public DateTime Date { get; set; } 
    } 
    Dim dataSource As New List(Of Item)() 
    Dim startDate = New Date(2011, 1, 1) 
    Dim endDate = New Date(2011, 6, 1) 
 
    Dim r As New Random() 
    Dim i As Date = startDate 
    Do While i < endDate 
        dataSource.Add(New Item() With {.Date = i, .Duration = TimeSpan.FromDays(r.Next(50, 100))}) 
        i = i.AddMonths(1) 
    Loop 
 
    For i As Integer = 0 To 14 
        dataSource.Add(New Item() With {.Date = startDate.AddMonths(r.Next(0, 5)).AddDays(15)}) 
    Next i 
    RadTimeline1.ItemsSource = dataSource 
 
    public class Item 
    public TimeSpan Duration {get;set;} 
    public Date Date {get;set;} 

You may see the result below: Rad Time Line customizing items 01

ItemTemplateSelector

Using ItemTemplateSelector is another approach for customizing the RadTimeline items. Aside from the previous one - here a single property is used to change the appearance of both duration and instant item types. This example will demonstrate how you may set the DataTemplates we used in the previous section.

We'll get started with creating a CustomItemTemplateSelector class. It should inherit the DataTemplateSelector class and override its SelectTemplate method. We'll create two properties with type DataTemplate - these are the InstantItemTemplate and ItemWithDurationTemplate we used in the previous section of this article.

We are using the Product class from the previous section as datasource for our Timeline.

 public class CustomItemTemplateSelector : DataTemplateSelector 
    { 
        public DataTemplate InstantItemTemplate { get; set; } 
        public DataTemplate ItemWithDurationTemplate { get; set; } 
 
        public override DataTemplate SelectTemplate(object item, DependencyObject container) 
        { 
            TimelineDataItem data = item as TimelineDataItem; 
            Product productItem; 
 
            if (data == null) 
                productItem = item as Product; 
            else 
                productItem = data.DataItem as Product; 
 
            if (productItem == null) 
                return base.SelectTemplate(item, container); 
 
            if (productItem.Duration.Days != 0) 
                return this.ItemWithDurationTemplate; 
            else 
                return this.InstantItemTemplate; 
        } 
    } 
 Public Class CustomItemTemplateSelector 
 Inherits DataTemplateSelector 
    Public Property InstantItemTemplate() As DataTemplate 
    Public Property ItemWithDurationTemplate() As DataTemplate 
 
    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate 
        Dim data As TimelineDataItem = TryCast(item, TimelineDataItem) 
        Dim productItem As Product 
 
        If data Is Nothing Then 
            productItem = TryCast(item, Product) 
        Else 
            productItem = TryCast(data.DataItem, Product) 
        End If 
 
        If productItem Is Nothing Then 
            Return MyBase.SelectTemplate(item, container) 
        End If 
 
        If productItem.Duration.Days <> 0 Then 
            Return Me.ItemWithDurationTemplate 
        Else 
            Return Me.InstantItemTemplate 
        End If 
    End Function 
 End Class 

We'll extend the View Model we previously created with CustomItemTemplateSelector property and field as shown below:

private DataTemplateSelector customItemTemplateSelector; 
public DataTemplateSelector CustomItemTemplateSelector 
{ 
    get 
    { 
        return this.customItemTemplateSelector; 
    } 
    set 
    { 
        this.customItemTemplateSelector = value; 
    } 
} 
Private customItemTemplateSelector_Renamed As DataTemplateSelector 
Public Property CustomItemTemplateSelector() As DataTemplateSelector 
    Get 
        Return Me.customItemTemplateSelector_Renamed 
    End Get 
    Set(ByVal value As DataTemplateSelector) 
        Me.customItemTemplateSelector_Renamed = value 
    End Set 
End Property 

Now in XAML you may create an instance of the CustomItemTemplateSelector class, set the DataTemplates and provide it to the ItemTemplateSelector property:

  <UserControl.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> 
 
        <local:CustomItemTemplateSelector x:Key="ItemTemplateSelector" 
                                          InstantItemTemplate="{StaticResource InstantItemTemplate}" 
                                          ItemWithDurationTemplate="{StaticResource ItemWithDurationTemplate}"/> 
    </UserControl.Resources>   
 
    <UserControl.DataContext> 
        <local:ExampleViewModel CustomItemTemplateSelector="{StaticResource ItemTemplateSelector}"/> 
    </UserControl.DataContext> 
 
    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="750"> 
        <telerik:RadTimeline Height="250" x:Name="RadTimeline1" 
                    VerticalAlignment="Top" 
                    Margin="6" 
                    PeriodStart="2011/01/01" PeriodEnd="2011/06/01" 
                    StartPath="Date" 
                    DurationPath="Duration" 
                    ItemTemplateSelector="{StaticResource ItemTemplateSelector}"      
                    ItemsSource="{Binding Data}"> 
            <telerik:RadTimeline.Intervals> 
                <telerik:YearInterval /> 
                <telerik:MonthInterval /> 
                <telerik:WeekInterval /> 
                <telerik:DayInterval /> 
            </telerik:RadTimeline.Intervals> 
        </telerik:RadTimeline> 
    </Grid> 

The result is the same as the one shown in the previous section image.

In this article