Expanding and Collapsing Items

This tutorial will walk you through the following common tasks:

Expanding and Collapsing Items Declaratively

To expand a treeview item you need to set the IsExpanded attribute to True. Conversely, in order to collapse an item you should set the IsExpanded attribute to False.

The default value of the IsExpanded property is False.

XAML

<telerik:RadTreeViewItem x:Name="radTreeViewItem" Header="Sport Categories" IsExpanded="True">

In order to expand a treeview item in the code-behind you need to set the IsExpanded property of an instance of the RadTreeViewItem class to True. If you want to collapse a treeview item in the code-behind, the same property should be set to False.

C#

private void ExpandTreeViewItem()
{
    radTreeViewItem.IsExpanded = true;
}
private void CollapseTreeViewItem()
{
    radTreeViewItem.IsExpanded = false;
}

VB.NET

Private Sub ExpandTreeViewItem()
    radTreeViewItem.IsExpanded = True
End Sub
Private Sub CollapseTreeViewItem()
    radTreeViewItem.IsExpanded = False
End Sub

Expanding and Collapsing TreeView Items Recursively

The RadTreeView and RadTreeViewItem classes offer two methods for expanding and collapsing all nodes recursively. In order to expand all nodes use the ExpandAll() method and respectively use the CollapseAll() method - to collapse all nodes.

If you use the ExpandAll() \ CollapseAll() method of the RadTreeView class then the whole tree will be expanded\collapsed. For example, add the following lines of code to expand or collapse all nodes:

C#

private void ExpandAllTreeViewItems()
{
    radTreeView.ExpandAll();
}
private void CollapseAllTreeViewItems()
{
    radTreeView.CollapseAll();
}

VB.NET

Private Sub ExpandAllTreeViewItems()
    radTreeView.ExpandAll()
End Sub
Private Sub CollapseAllTreeViewItems()
    radTreeView.CollapseAll()
End Sub

The ExpandAll() and CollapseAll() methods work only after the first level items have been loaded. This is visible only when the treeview is bound. Therefore it should be called only in or after the Loaded event.

Expanding Only a Single Branch of the TreeView

If you want the RadTreeView to automatically close all the nodes that are not on the path of the expanded node, then you need to use the IsSingleExpandPath property. If you set this property to True then only a single branch of the tree will be expanded. All of the other already expanded branches will be collapsed automatically if a new one is going to be expanded.

XAML

<telerik:RadTreeView x:Name="radTreeView" IsSingleExpandPath="True">

C#

radTreeView.IsSingleExpandPath = true;

VB.NET

radTreeView.IsSingleExpandPath = true

Now when you try to expand a new branch from the tree, all of the other expanded branches that are not on the path of the expanded node will be collapsed.

Expand an Item By Path

The RadTreeView offers ExpandItemByPath functionality. It allows you to expand a specific treeview item by creating a path from the string representations of the Headers.

Imagine, you have the following RadTreeView declaration:

XAML

<telerik:RadTreeView Margin="8" x:Name="radTreeView">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis" x:Name="radTreeViewItemTennis">
            <telerik:RadTreeViewItem Header="Table Tennis"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Cycling">
            <telerik:RadTreeViewItem Header="Road Cycling"/>
            <telerik:RadTreeViewItem Header="Indoor Cycling"/>
            <telerik:RadTreeViewItem Header="Mountain Bike"/>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

In this example the treeview item with Header "Cycling" will be expanded. First, you need to create a path by the string representations of the Headers using some separator (for this example "|" will be used as a separator). Second, you should invoke the ExpandItemByPath method of an instance of the RadTreeView class.

Here is an example:

C#

private void ExpandItemByPath()
{
    string path = "Sport Categories|Cycling|Indoor Cycling";
    radTreeView.ExpandItemByPath( path, "|" );
}

VB.NET

Private Sub ExpandItemByPath()
    Dim path As String = "Sport Categories|Cycling|Indoor Cycling"
    radTreeView.ExpandItemByPath(path, "|")
End Sub

And here is the result:

The RadTreeView class supports PathSeparator property, which represents the default separator. The default separator for the RadTreeView is "\", but it can be changed. Here you can see how the previous example will look like if you set the PathSeparator property.

C#

private void ExpandItemByPath()
{
    string path = "Sport Categories|Cycling|Indoor Cycling";
    radTreeView.PathSeparator = "|";
    radTreeView.ExpandItemByPath( path );
}

VB.NET

Private Sub ExpandItemByPath()
    Dim path As String = "Sport Categories|Cycling|Indoor Cycling"
    radTreeView.PathSeparator = "|"
    radTreeView.ExpandItemByPath( path )
End Sub

Expand an Item by Using the ItemContainerStyle

A neat way to expand all items regardless of the asynchronous issues is to set an ItemContainerStyle with a single setter - setting the IsExpanded property to True. For more information about ItemContainerStyle read the main topic about ItemContainerStyle.

Expand on Single or Double Click

To improve the user experience, the expand behavior of the nodes can be set to expand on a single or double click.

If you want to expand the nodes on a single click, then you need to set the IsExpandOnSingleClickEnabled attribute to True.

XAML

<telerik:RadTreeView x:Name="radTreeView" IsExpandOnSingleClickEnabled="True">

If you want to expand the nodes on a double click, then you need to set the IsExpandOnDblClickEnabled attribute to True.

XAML

<telerik:RadTreeView x:Name="radTreeView" IsExpandOnDblClickEnabled="True">

The same properties can be used in the code-behind. See the next code lines:

C#

private void ExpandOnSingleClick()
{
    radTreeView.IsExpandOnSingleClickEnabled = true;
}
private void ExpandOnDoubleClick()
{
    radTreeView.IsExpandOnDblClickEnabled = true;
}

VB.NET

Private Sub ExpandOnSingleClick()
    radTreeView.IsExpandOnSingleClickEnabled = True
End Sub Private Sub ExpandOnDoubleClick()
    radTreeView.IsExpandOnDblClickEnabled = True
End Sub

The default behavior of the RadTreeView is to expand the items on double click.

Events

The Telerik RadTreeView and RadTreeViewItem classes offer you four events for managing the expanding and collapsing processes. These events are available both on the RadTreeView and on the RadTreeViewItem classes.

XAML

<telerik:RadTreeView x:Name="radTreeView"
                    PreviewExpanded="radTreeView_PreviewExpanded"
                    Expanded="radTreeView_Expanded"
                    PreviewCollapsed="radTreeView_PreviewCollapsed"
                    Collapsed="radTreeView_Collapsed">

The PreviewExpanded event occurs when the treeview item is about to be expanded. The Expanded event is fired when the treeview item is already expanded. The type of the passed event arguments for both of the events is RadRoutedEventArgs.

The PreviewCollapsed event is fired just before the item is collapsed. The Collapsed event is fired after the treeview item is collapsed. The type of the passed event arguments for both of the events is RadRoutedEventArgs.

For a full list of all exposed by the RadTreeView events, check out the Events - Overview topic.

Styling the Expander

If you want to see how to style the treeview expander, read the topic about Styling Expander.

Expand All Nodes at Start

There are several ways to expand all nodes automatically at start:

  • If your RadTreeView is data bound to a business object, then the best solution is to use ItemContainerStyle.

    XAML

    <Style x:Key="ItemContainerStyle" TargetType="telerik:RadTreeViewItem">
        <Setter Property="IsExpanded" Value="True"/>
    </Style>
    ....
    <telerik:RadTreeView x:Name="radTreeView" ItemContainerStyle="{StaticResource ItemContainerStyle}"/>
    
  • If your RadTreeView is populated declaratively, then the best solution is to use a Style. You should create a style by setting the IsExpanded property to True and then setting it to all RadTreeViewItems.

    XAML

    <Style x:Key="RadTreeViewItemStyle" TargetType="telerik:RadTreeViewItem">
        <Setter Property="IsExpanded" Value="True"/>
    </Style>
    <telerik:RadTreeView Margin="8" x:Name="radTreeView">
        <telerik:RadTreeViewItem Header="Sport Categories" Style="{StaticResource RadTreeViewItemStyle}">
            <telerik:RadTreeViewItem Header="Football" Style="{StaticResource RadTreeViewItemStyle}">
                <telerik:RadTreeViewItem Header="Futsal" Style="{StaticResource RadTreeViewItemStyle}"/>
                <telerik:RadTreeViewItem Header="Soccer" Style="{StaticResource RadTreeViewItemStyle}"/>
            </telerik:RadTreeViewItem>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeView>
    
  • If you are using Silverlight 4, then you could take advantage of the Implicit Styles. For example, notice how the previous example is modified - the x:Key is omitted. You should also not set the Style property of the RadTreeViewItem.

    XAML

    <Style TargetType="telerik:RadTreeViewItem">
        <Setter Property="IsExpanded" Value="True"/>
    </Style>
    ...
    <telerik:RadTreeView Margin="8" x:Name="radTreeView">
        <telerik:RadTreeViewItem Header="Sport Categories">
            <telerik:RadTreeViewItem Header="Football">
                <telerik:RadTreeViewItem Header="Futsal"/>
                <telerik:RadTreeViewItem Header="Soccer"/>
            </telerik:RadTreeViewItem>
        </telerik:RadTreeViewItem>
    </telerik:RadTreeView>
    

Binding the IsExpanded Property

A very common issue is to have the RadTreeViewItem's IsExpanded property bound to a property of a custom business object. The easiest way to achieve this is to use Style Binding. For example, imagine that your business object has a boolean property named IsExpanded. And you want to bind the IsExpanded property of this business object to the IsExpanded property of the RadTreeViewItem. Then check out the code snippet below, it demonstrates how to achieve this.

XAML

<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
    <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
</Style>
....
<telerik:HierarchicalDataTemplate x:Key="MyViewModelTemplate">
    <TextBlock Text="{Binding Name}" Foreground="Red" FontSize="16" FontFamily="Verdana" />
</telerik:HierarchicalDataTemplate>
....
<telerik:RadTreeView ItemsSource="{Binding Source={StaticResource TreeViewDataSource}}" 
                     ItemTemplate="{StaticResource MyViewModelTemplate}"
                     ItemContainerStyle="{StaticResource ItemContainerStyle}"/>

For a complete demo, please refer to the How to Bind RadTreeView to Hierarchical Data and Use Style Binding topic.

See Also