SelectedItem not work with itemtemplates

6 posts, 0 answers
  1. Gilbert van Veen
    Gilbert van Veen avatar
    68 posts
    Member since:
    Oct 2009

    Posted 27 Feb 2013 Link to this post

    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?

  2. Arıl
    Arıl avatar
    13 posts
    Member since:
    Jun 2012

    Posted 28 Feb 2013 Link to this post

    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
  3. DevCraft banner
  4. Gilbert van Veen
    Gilbert van Veen avatar
    68 posts
    Member since:
    Oct 2009

    Posted 28 Feb 2013 Link to this post

    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?
  5. Arıl
    Arıl avatar
    13 posts
    Member since:
    Jun 2012

    Posted 28 Feb 2013 Link to this post

    Can you explain how can you get the current selected item while catching the click via mousebuttonup?
  6. Gilbert van Veen
    Gilbert van Veen avatar
    68 posts
    Member since:
    Oct 2009

    Posted 28 Feb 2013 Link to this post

    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.

  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 01 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner