Timeline SelectionMode with custom templates

[Chris]

Hi,

Is is possible to have fully customised templates that still supports the SelectionMode functionality?

I have a Timeline supporting Selection (SelectionMode="Extended") working as expected.  However, as soon as I change the item template using TimelineItemTemplate to contain some custom content it no longer allows selections to be made.

E.g. using the Telerik demo code template from the CustomizingItems project shows the issue:

<DataTemplate x:Key="ItemWithDurationTemplate">
        <Border Width="10" Height="10" ...>
            <Rectangle Height="7" Width="7"  ... >
            </Rectangle>
        </Border>
    </DataTemplate>

...

<t:RadTimeline Grid.Row="0"
    TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}"

...

If I change the template to:

<DataTemplate x:Key="ItemWithDurationTemplate">
    <t:TimelineItemControl x:Name="ItemLine" Height="10" ... />

...

it again allows selection.  It appears that the selection feature is provided by the Telerik control TimelineItemControl.  However this doesn't allow content and so limits customisability.

Thanks,
Chris

[Sia]

Hello Chris,

Unfortunately this is a known limitation of the control, which is already logged in our feedback portal (the same behavior is observed in WPF also). I can suggest you two solutions.

The first one is to use implicit style instead of data template, the same as CustomTimelineItemControlStyle in the attached project, just remove the key.

If a data template is needed for your requirements, you can put a TimelineItemControl inside it and apply to it the needed custom style (with the visual states since they are needed to achieve a visual presentation of the selection).

A similar approach is used in our FirstLook demo (again the same is available for WPF).

Please let me know whether this helps.

Regards,
Sia
Telerik

 

 

[Chris]

Hi Sia,

I hadn't spotted that post.  Both the solutions you have proposed would work and thanks for the quick reply :-)

Chris

[Lyubomir]

Hello,

Can you tell me if the problem with the template is fixed?
I am using the timeline as well and have created a DataTemplate for ItemWithDuration

<DataTemplate x:Key="ItemWithDurationTemplate">
            
            <Border Height="20"
                    Margin="5"
                    Background="#00C853"
                    BorderThickness="1"
                    BorderBrush="White"
                    Cursor="Hand"
                    x:Name="Border">

                <TextBlock Text="{Binding DataItem.EmployeeName}"
                           Foreground="White"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           FontSize="12"
                           Cursor="Hand" />

            </Border>
            
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Background"
                            Value="Green"
                            TargetName="Border" />
                </Trigger>
                
                
            </DataTemplate.Triggers>
            

        </DataTemplate>

 

I want to change the background color of the item, when it is clicked on. But if I try to implement it like with the IsMouseOver scenario I get a message that the IsSelected member is not recognized or is not accessable. Can you help me?

Thank you :)

[Martin Ivanov]

Hello Chris,

To achieve your requirement you can use a customized TimelineItemControl template instead of the TimelineItemTemplate. Basically, you can extract the TimelineItemControl Style and modify the mouse over visual element in the ControlTemplate. Then apply the custom Style using an implicit style. For example:

<Window.Resources>
    <Style TargetType="telerik:TimelineItemControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:TimelineItemControl">
                    <!-- customized template here -->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

As for the approach with the DataTemplate, I wasn't able to reproduce the issue. The trigger works on my side. Can you please try the attached project and let me know if I am missing something?

Regards,
Martin Ivanov
Progress Telerik