[Solved] SelectedItem not work with itemtemplates

[Gilbert van Veen]

Hi,

I have some problems with the combination of itemtemplates and selecteditem. I need itemtemplates to "color" the items in the timeline. I also want a summary when I click on one item.

In XAM in the TimeLine:

.
.
TimelineInstantItemTemplate="{StaticResource InstantItemTemplate}"
TimelineItemTemplate="{StaticResource ItemWithDurationTemplate}"
.
.

The ItemTemplates:

<DataTemplate x:Key="InstantItemTemplate">
    <Border Width="10" Height="10" Margin="0,0,0,5">
        <Rectangle Grid.Column="0" Height="7" VerticalAlignment="Center" Fill="{Binding DataItem.SelectedColor, Converter={StaticResource ColorToBrushConverter}}"/>
    </Border>
</DataTemplate>
<DataTemplate x:Key="ItemWithDurationTemplate">
    <Border Height="10" Margin="0, 0, 0, 5">
        <Rectangle Grid.Column="0" Height="7" VerticalAlignment="Center" Fill="{Binding DataItem.SelectedColor, Converter={StaticResource ColorToBrushConverter}}"/>
    </Border>
</DataTemplate>

The XAML for the selected event information:

<ScrollViewer Margin="0,20,0,20" Grid.Row="1" BorderThickness="0" HorizontalScrollBarVisibility="Disabled">
           <ItemsControl ItemsSource="{Binding SelectedItems, ElementName=radTimeline1}">
               <ItemsControl.ItemTemplate>
                   <DataTemplate>
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="Auto" />
                               <ColumnDefinition Width="Auto" />
                               <ColumnDefinition Width="Auto" />
                               <ColumnDefinition Width="*" />
                           </Grid.ColumnDefinitions>
                           <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Date}" />
                           <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Description}" />
                           <TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Duration}"/>
                       </Grid>
                   </DataTemplate>
               </ItemsControl.ItemTemplate>
           </ItemsControl>
       </ScrollViewer>

But when I click on an ItemTemplate then the SelectionChange event doesn't fire. When I remove the ItemTemplates from the TimeLine control then it fires?

[Arıl]

Hi,

I am actually trying to achieve exact same thing. I have very little hope we can achieve default itemtemplate behavior with changing the itemtemplate. But what I'm trying to do is achieve this via implicit templates. I'm not successfull about it yet. But binding its color via style and not touching itemtemplate may be a way to go.

Regards

[Gilbert van Veen]

Hi,

I use now the leftmousebuttonup event on the Rectangel to "catch" the itemclick event. From that point I read the item-data object value and do my thing. Not nice, but it will do.

How can you set a style instead using an itemtemplate?

[Arıl]

Can you explain how can you get the current selected item while catching the click via mousebuttonup?

[Gilbert van Veen]

I fill the TimeLineitems with a Tag.

CS:

private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
      {
          AbsenceItem MySelectedItem = (AbsenceItem)(sender as Rectangle).Tag;
          MySelectedItems.Add(MySelectedItem);
          MyItemsControl.ItemsSource = null;
          MyItemsControl.ItemsSource = MySelectedItems;
          MyScrollViewer.ScrollToVerticalOffset(0);
      }

XAML Datatemplates:

<DataTemplate x:Key="InstantItemTemplate">
            <Border Width="10" Height="10" Margin="0,0,0,5">
                <Rectangle Grid.Column="0" Height="7" VerticalAlignment="Center" Fill="{Binding DataItem.SelectedColor, Converter={StaticResource ColorToBrushConverter}}" Tag="{Binding DataItem}" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"/>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="ItemWithDurationTemplate">
            <Border Height="10" Margin="0, 0, 0, 5">
                <Rectangle Grid.Column="0" Height="7" VerticalAlignment="Center" Fill="{Binding DataItem.SelectedColor, Converter={StaticResource ColorToBrushConverter}}" Tag="{Binding DataItem}" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"/>
            </Border>
        </DataTemplate>

Not the nicest approach but it will do for now untill Telerik gives a good solution.

[Tsvetie]

Hello,

We are aware of this limitation and we have a workaround that you can use in order to combine custom ItemTemplate and the selection feature. The approach is demonstrated in our First Look demo. Basically, you need to use a custom control that inherits TimelineItemControlBase in the DataTemplate that you use for the timeline items. For example:

<DataTemplate x:Key="PresidentsTemplate">
    <example:CustomTimelineControl Style="{StaticResource PresidentsStyle}" />
</DataTemplate>

We will research the case and try to fix this limitation.

All the best,
Tsvetie
the Telerik team