Timeline SelectionMode with custom templates

5 posts, 1 answers
  1. Chris
    Chris avatar
    7 posts
    Member since:
    Feb 2015

    Posted 09 Mar 2015 Link to this post

    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


  2. Answer
    Sia
    Admin
    Sia avatar
    753 posts

    Posted 10 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Chris
    Chris avatar
    7 posts
    Member since:
    Feb 2015

    Posted 10 Mar 2015 in reply to Sia Link to this post

    Hi Sia,

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

    Chris
  4. Lyubomir
    Lyubomir avatar
    4 posts
    Member since:
    Jun 2019

    Posted 05 Jun 2019 Link to this post

    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 :)

  5. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2361 posts

    Posted 07 Jun 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top