Cannot bring item into view

[Mladen]

Hi, I have RadTreeView where the item can be added on various levels of the tree by clicking the button on the parent node. Sometimes when this parent has more children, the newly added item is not shown (the user needs to manually scroll to it, because it is below the other items). I need to automatically show the newly added item. I've tried everything but I couldn't get this to work. With the virtualization of the tree switched off I think that this code should work:

RadTreeViewItem seletedItem = treeView.ContainerFromItemRecursive(treeView.SelectedItem);
seletedItem.BringIntoView();

 But it does not (nothing happens). Also I tried to call:

treeView.BringItemIntoView(seletedItem);

and 

treeView.BringItemIntoView(reeView.SelectedItem);

with no success. Currently i am trying to use path (although I'm not sure this would work since I'm using ItemsTemplate for the items in the tree. Again with no success. Please tell me how to achieve the desired functionality - It does not need to be bound to selected item, I just need to be able to scroll automatically to (bring into view) to the desired item from the tree. Currently the code and XAML are the following:

   <HierarchicalDataTemplate x:Key="EquipmentTemplate" DataType="model:IComponentTreeItem"  ItemsSource="{Binding Children}">
       <Grid>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*"/>
               <ColumnDefinition Width="Auto"/>
           </Grid.ColumnDefinitions>

           <TextBox HorizontalAlignment="Stretch" PreviewMouseDown="UIElement_OnPreviewMouseDown" IsReadOnly="{Binding ViewSettings.IsReadOnly}" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, NotifyOnValidationError=True}"/>

           <StackPanel Orientation="Horizontal" Grid.Column="1" >
               <telerik:RadButton HorizontalAlignment="Right" Content="+" Width="20" Height="20" Foreground="{StaticResource scbComponent}" Click="AddButton_OnClick"
                                      Visibility="{Binding Converter={StaticResource EquipmentToVisibilityConverter}, ConverterParameter=add}"
                                      Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.AddEquipmentCommand}" CommandParameter="{Binding}" ToolTip="New Component" />

               <telerik:RadButton HorizontalAlignment="Right"  Content="X" Width="20" Height="20" Foreground="Red"
                                  Visibility="{Binding Converter={StaticResource EquipmentToVisibilityConverter}, ConverterParameter=delete}"
                                  Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.DeleteCommand}" CommandParameter="{Binding}"  />


           </StackPanel>

       </Grid>

       <HierarchicalDataTemplate.ItemContainerStyle>
           <Style TargetType="telerik:RadTreeViewItem">

               <Setter Property="HorizontalContentAlignment" Value="Stretch"  />
               <Setter Property="IsExpanded"
                          Value="{Binding IsExpanded, Mode=TwoWay}" />
           </Style>
       </HierarchicalDataTemplate.ItemContainerStyle>
   </HierarchicalDataTemplate>



<telerik:RadTreeView Grid.Row="0" Grid.Column="2"
                   IsVirtualizing="False"
                   IsLineEnabled="True"
                   MinWidth="300"
                   x:Name="ComponentsTree"
                   HorizontalContentAlignment="Stretch"
                   HorizontalAlignment="Stretch"
                   ItemTemplate="{StaticResource EquipmentTemplate}"
                   IsEditable="True"
                   AutoScrollToSelectedItem="True"
                   SelectedItem="{Binding SelectedTreeEquipment, Mode=TwoWay}"
                   ItemsSource="{Binding Equipments}">

               </telerik:RadTreeView>

 

 

private void AddButton_OnClick(object sender, RoutedEventArgs e)
     {
         var frameworkElement = sender as FrameworkElement;
         if (frameworkElement != null)
         {
             var treeItem = frameworkElement.DataContext as IComponentTreeItem;
             if (treeItem == null) return;
             var tree = frameworkElement.GetVisualParent<RadTreeView>();
             tree.BringIntoViewMode = BringIntoViewMode.HeaderAndItems;
             tree.AutoScrollToSelectedItem = false;
             var itemToScroll = (treeItem.Children != null && treeItem.Children.Any()) ?  treeItem.Children.Last() :  treeItem;
             var path = GetPathFromIComponentTreeItem(itemToScroll);
             tree.SelectItemByPath(path);
             tree.BringPathIntoView(path);

         }
     }

     public string GetPathFromIComponentTreeItem(IComponentTreeItem item)
     {
         string path = item.Name;
         IComponentTreeItem nextParent = item.ParentItem;
         while (nextParent != null)
         {
             path = String.Concat(nextParent.Name, @"\", path);
             nextParent = nextParent.ParentItem;
         }
         return path;
     }

 

 

public interface IComponentTreeItem
   {
       string Name { get; set; }
       short Order { get; set; }
       TreeItemType Type { get; }
       bool IsExpanded { get; set; }
       ObservableCollection<IComponentTreeItem> Children { get; set; }
       IComponentTreeItem ParentItem { get; set; }
       TreeItemViewSettings ViewSettings { get; set; }

   }

public class TreeItemViewSettings
   {
       public bool CanAddChildren { get; set; }

       public bool CanDelete { get; set; }

       public bool CanReorder { get; set; }

       public bool IsReadOnly { get; set; }

   }

 

Thank you in advance!

[Martin Ivanov]

Hello Mladen,

Thank you for the code snippets. Based on them I created a small example that you can use as a reference for achieving the desired result. Basically, the bring into view method doesn't work because the TextSearch.TextPath attached property is not set on the treeview control. The BringPathIntoView() is using TextSearch.TextPath to search in the treeview's items. For example, in your implementation the path is constructed with the Name properties of the business objects. To make the bring path into view to work you should set the TextSearch.TextPath to "Name". Another example - if you have a property defined in the items' view model called PathFragment and you use it to create the path you will need to set the TextPath property to "PathFragment". You can also take a look a the BringIntoView Support help article to see a sample use of the method in a data binding scenario.

<telerik:RadTreeView TextSearch.TextPath="Name" />

Please try this and let me know if it works in your case.

Regards,
Martin
Telerik