Expand child nodes in another treeview WPF

Question

I have two treeviews in my panel.

To do: Expand the nodes upto level 2. On select parent node in the first treeview it should display the child nodes and its details in the second treeview.Onselect the parent nodes child nodes should open in a new tab/ new treeview.

Need Help!

  <telerik:RadTreeListView 
            x:Name="Tree1"
            AutoGenerateColumns="False"
            ShowInsertRow="False"
            RowDetailsVisibilityMode="Collapsed"
            RowIndicatorVisibility="Collapsed"
            EnableColumnVirtualization="True"
            EnableRowVirtualization="True"
            SelectionMode="Single"
            SelectionUnit="Cell"
            AlternationCount="2"
            RowHeight="25"
            FontSize="14"
            FontWeight="Bold"
            GroupRenderMode="Flat"
            CanUserInsertRows="False"
            CanUserResizeRows="False"
            CanUserDeleteRows="False"
            CanUserReorderColumns="False"
            CanUserFreezeColumns="False"           
            IsExpandedBinding="{Binding IsExpanded, Mode=TwoWay}"
            IsSynchronizedWithCurrentItem="False"
            Grid.Row="1"
            Visibility="Visible"
            IsReadOnly="True" 
             
            >
            <telerik:RadTreeListView.ChildTableDefinitions>
                <telerik:TreeListViewTableDefinition ItemsSource="{Binding TeamCollection}" />
            </telerik:RadTreeListView.ChildTableDefinitions>
            <telerik:RadTreeListView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Team}" 
                                    Header="Name" IsReadOnly="True" MinWidth="100" HeaderTextAlignment="Center" />        
            </telerik:RadTreeListView.Columns>         
        </telerik:RadTreeListView>

  <telerik:RadTreeListView 
            x:Name="Tree1"
            AutoGenerateColumns="False"
            ShowInsertRow="False"
            RowDetailsVisibilityMode="Collapsed"
            RowIndicatorVisibility="Collapsed"
            EnableColumnVirtualization="True"
            EnableRowVirtualization="True"
            SelectionMode="Single"
            SelectionUnit="Cell"
            AlternationCount="2"
            RowHeight="25"
            FontSize="14"
            FontWeight="Bold"
            GroupRenderMode="Flat"
            CanUserInsertRows="False"
            CanUserResizeRows="False"
            CanUserDeleteRows="False"
            CanUserReorderColumns="False"
            CanUserFreezeColumns="False"           
            IsExpandedBinding="{Binding IsExpanded, Mode=TwoWay}"
            IsSynchronizedWithCurrentItem="False"
            Grid.Row="1"
            Visibility="Visible"
            IsReadOnly="True" 
             
            >
            <telerik:RadTreeListView.ChildTableDefinitions>
                <telerik:TreeListViewTableDefinition ItemsSource="{Binding TeamCollection}" />
            </telerik:RadTreeListView.ChildTableDefinitions>
            <telerik:RadTreeListView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Team}" 
                                    Header="Name" IsReadOnly="True" MinWidth="100" HeaderTextAlignment="Center" />                   
               <telerik:GridViewDataColumn DataMemberBinding="{Binding City}" 
                                    Header="City" IsReadOnly="True" MinWidth="100" HeaderTextAlignment="Center" /> 
            </telerik:RadTreeListView.Columns>         
        </telerik:RadTreeListView>

almulo almulo · Accepted Answer · 2015-06-17T09:13:09

First of all, both TreeViews are bound to the same ItemsSources (and have the same Name, which doesn't even compile...). You'll want to bind the second TreeView to another collection, and modify that collection depending on the first TreeView's SelectedItem.

<telerik:RadTreeListView x:Name="Tree1"
                         SelectedItem="{Binding SelectedParentItem}"
                         ...>
    <telerik:RadTreeListView.ChildTableDefinitions>
        <telerik:TreeListViewTableDefinition ItemsSource="{Binding TeamCollection}" />
    </telerik:RadTreeListView.ChildTableDefinitions>
    ...
<telerik:RadTreeListView />

<telerik:RadTreeListView x:Name="Tree2"
                         ...>
    <telerik:RadTreeListView.ChildTableDefinitions>
        <telerik:TreeListViewTableDefinition ItemsSource="{Binding ChildTeamCollection}" />
    </telerik:RadTreeListView.ChildTableDefinitions>
    ...
<telerik:RadTreeListView />

In your DataContext, set ChildTeamCollection when SelectedParentItem changes.

private object selectedParentItem;
public object SelectedParentItem
{
    get { return selectedParentItem; }
    set 
    {
        if (selectedParentItem != value)
        {
            selectedParentItem = value;
            ChildTeamCollection = GetChildItemsSource();  // Retrieve the child items of the selected node
        }
    }
}

As for the last part of your question... I still don't understand what you mean with "new tab \ new treeview". Do you mean a completely new TreeView in a different place? Or you mean the second TreeView in your example?

Expand child nodes in another treeview WPF

1 Answers