How to select programmatically a child item in RadTreeListView ?

1 Answer 34 Views
TreeListView
Emy
Top achievements
Rank 1
Emy asked on 02 Jun 2022, 10:21 AM

Hi, 

I try to select a child item in a TreeListView WO succes... When I try to select the root node it works fine.

Did I miss something ?

Thanks!

This is my code:

 <Grid x:Name="layoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
            <Button x:Name="button" Height="20" Command="{Binding CmdAdd}">Add</Button>
            <Button x:Name="button2" Height="20" Command="{Binding CmdSelectLastItemAdded}">Select last child added</Button>
            <Button x:Name="button3" Height="20" Command="{Binding CmdSelectRootNode}">Select root</Button>
        </StackPanel>
        
        <!-- The Tree -->
        <telerik:RadTreeListView x:Name="TreeListView" ItemsSource="{Binding Items}"
                                 CanUserFreezeColumns="False" 
                                 RowIndicatorVisibility="Collapsed" 
                                 ColumnWidth="auto" 
                                 AutoGenerateColumns="False" 
                                 IsDragDropEnabled="True"
                                 IsDropPreviewLineEnabled="False"
                                 ShowColumnHeaders="True"
                                 SelectionMode="Extended" 
                                 GridLinesVisibility="None"
                                 IsSynchronizedWithCurrentItem="False"
                                 SelectedItem="{Binding SelectedItem , Mode=TwoWay}"
                                 IsExpandedBinding="{Binding IsExpandedInTree, Mode=TwoWay}"
                                 Margin="5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4">


            <!-- The columns -->
            <telerik:RadTreeListView.Columns>

                <telerik:GridViewColumn Name="colName" Header="Name" FilterMemberPath="DisplayName">
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate DataType="local:ITreeItem">

                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <CheckBox IsChecked="{Binding IsVisible, Mode=OneWay}" />
                                <TextBlock Text="{Binding DisplayName}" Grid.Column="2" VerticalAlignment="Center"/>
                            </Grid>

                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>

                    <telerik:GridViewColumn.CellEditTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding DisplayName}" Margin="2"/>
                        </DataTemplate>
                    </telerik:GridViewColumn.CellEditTemplate>

                </telerik:GridViewColumn>

            </telerik:RadTreeListView.Columns>

            <telerik:RadTreeListView.ChildTableDefinitions>
                <telerik:TreeListViewTableDefinition ItemsSource="{Binding Children}" />
            </telerik:RadTreeListView.ChildTableDefinitions>
        </telerik:RadTreeListView>
    </Grid>


 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            TreeListView.RowHeight = 20;
            var vm = new TreeVM();
            DataContext = vm;
        }

        public class TreeVM : ReactiveObject
        {
            private TreeItem _lastItemAdded;
            private TreeItem _firstItem;

            public Action <TreeItem> action { get; set; }

            private TreeItem _selectedItem;
            public TreeItem SelectedItem
            {
                get => _selectedItem;
                set => this.RaiseAndSetIfChanged(ref _selectedItem, value);
            }

            public ICommand CmdAdd { get; }
            public ICommand CmdSelectLastItemAdded { get; }
            public ICommand CmdSelectRootNode { get; }
            public TreeVM()
            {
                _items = new ObservableCollection<ITreeItem>();
                _firstItem = new TreeItem();
                _firstItem.DisplayName = "Root";
                _items.Add(_firstItem);
                CmdAdd = ReactiveCommand.Create(AddChild);
                CmdSelectLastItemAdded = ReactiveCommand.Create(Select);
                CmdSelectRootNode = ReactiveCommand.Create(SelectRoot);
            }

            private void Select()
            {
                SelectedItem = _lastItemAdded;
            }

            private void SelectRoot()
            {
                SelectedItem = _firstItem;
            }

            private void AddChild()
            {
                var childitem = new TreeItem();
                childitem.DisplayName = "Parent";

                var child = new TreeItem();
                child.DisplayName = "child1";
                childitem.Children.Add(child);

                child = new TreeItem();
                child.DisplayName = "child2";
                childitem.Children.Add(child);
                child = new TreeItem();
                
                _items[0].Children.Add(childitem);

                _lastItemAdded = child;
            }

            private ObservableCollection<ITreeItem> _items;

            public ObservableCollection<ITreeItem> Items
            {
                get => _items;
                set => this.RaiseAndSetIfChanged(ref _items, value);
            }
        }
    }

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 07 Jun 2022, 10:16 AM

Hello Emeline,

The child element is not selected, because the code in the AddChild() method is assigning an empty node to the _lastItemAdded field. The issue is actually not the empty node, but the fact that the node is never added into the items collection. It is just created and assigned to the field. Then in the Select() method, _lastItemAdded is used to assign the SelectedItem.

To resolve this, you can use a child node that is added to the items source. Or more specifically, you can comment the following line:

private void AddChild(object parameter)
{
	var childitem = new TreeItem();
	childitem.DisplayName = "Parent";

	var child = new TreeItem();
	child.DisplayName = "child1";
	childitem.Children.Add(child);

	child = new TreeItem();
	child.DisplayName = "child2";
	childitem.Children.Add(child);
	//child = new TreeItem();

	_items[0].Children.Add(childitem);

	_lastItemAdded = child;
}

I also attached a small sample based on your code. I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeListView
Asked by
Emy
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or