Expanding and Collapsing Items
This tutorial will walk you through the following common tasks:
- Expanding and collapsing an item
- Expanding and collapsing items recursively
- Expanding only a single branch of the treeview at once
- Expanding an item by path
- Expanding an item by using the ItemContainerStyle property
- Binding the IsExpanded property to a property of a business object
- Changing the expand on click mode
- Events
- Styling the expander
- Expand all nodes
Expanding and Collapsing an Item
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.
Example 1: Expanding on item in XAML
<telerik:RadTreeViewItem x:Name="radTreeViewItem" Header="Sport Categories" IsExpanded="True">
Example 2: Expanding on item in code
private void ExpandTreeViewItem()
{
radTreeViewItem.IsExpanded = true;
}
private void CollapseTreeViewItem()
{
radTreeViewItem.IsExpanded = false;
}
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.
Example 3: Expanding and collapsing the whole tree
private void ExpandAllTreeViewItems()
{
radTreeView.ExpandAll();
}
private void CollapseAllTreeViewItems()
{
radTreeView.CollapseAll();
}
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
By default the treeview allows you to have multiple nodes expanded at the same time. You can alter this and allow only a single expanded node by setting the IsSingleExpandPath property of RadTreeView to True. In this case when you expand a node, all of the others already expanded branches will be collapsed automatically.
Example 4: Setting IsSingleExpandPath property
<telerik:RadTreeView x:Name="radTreeView" IsSingleExpandPath="True">
Example 5: Setting IsSingleExpandPath property
radTreeView.IsSingleExpandPath = true;
radTreeView.IsSingleExpandPath = true
Expand an Item By Path
RadTreeView offers ExpandItemByPath method that allows you to built a unique path for each item and expand it via the path. It allows you to expand a specific treeview item by creating a path from the string representations of the Headers. You can read more about getting items by path in the BringIntoView Support article.
The following example shows how the feature works. For the sake of the demo we will expand the RadTreeViewItem with its Header set to "Indoor Cycling" (see Example 6).
Example 6: Simple TreeView definition
<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">
<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>
The ExpandItemByPath method accepts a string representing the path to the item that should be expanded. By default the path is built using the Header of each RadTreeViewItem from the root of the treeview to the searched item. For example, to expand the "Indoor Cycling" note you should use the following path - "Sport Categories\Cycling\Indoor Cycling". Here the "\" string is the default path separator.
The ExpandItemByPath has two overloads - one that accepts the string path and a separator. And another one that accepts only a string path.
Example 7: Calling ExpandItemByPath with path and a custom separator
private void ExpandItemByPath()
{
string path = "Sport Categories|Cycling|Indoor Cycling";
radTreeView.ExpandItemByPath( path, "|" );
}
Private Sub ExpandItemByPath()
Dim path As String = "Sport Categories|Cycling|Indoor Cycling"
radTreeView.ExpandItemByPath(path, "|")
End Sub
When using the overload that doesn't accept a path separator you can use the default one ("\") or set the PathSeparator property of RadTreeView to change it.
Example 8: Setting the PathSeparator property
private void ExpandItemByPath()
{
string path = "Sport Categories|Cycling|Indoor Cycling";
radTreeView.PathSeparator = "|";
radTreeView.ExpandItemByPath( path );
}
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
This is useful when the treeview is data bound to a collection of business objects and you don't have easy access to the RadTreeViewItems. You can define a Style that targets RadTreeViewItem and set or bound its IsExpanded property. Read more about this in the ItemContainerStyle article.
Example 9: Setting ItemContainerStyle
<FrameworkElement.Resources>
<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</FrameworkElement.Resources>
<telerik:RadTreeView ItemContainerStyle="{StaticResource ItemContainerStyle}"/>
Binding the IsExpanded Property
A very common scenario is to have the RadTreeViewItem IsExpanded property bound to a property of a custom business object. The easiest way to achieve this is to use style binding. Example 10 shows how to bind a boolean property (named IsExpanded) of a business object to the IsExpanded property RadTreeViewItem.
Example 10: Data bind the IsExpanded property
<FrameworkElement.Resources>
<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
</Style>
</FrameworkElement.Resources>
<telerik:RadTreeView ItemContainerStyle="{StaticResource ItemContainerStyle}"/>
You can find a runnable example showing this in the How to Bind RadTreeView to Hierarchical Data and Use Style Binding topic.
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. You can alter this behavior via the IsExpandOnSingleClickEnabled and IsExpandOnDblClickEnabled properties of RadTreeView.
If you want to expand the nodes on a single click, then you need to set the IsExpandOnSingleClickEnabled attribute to True.
Example 11: Allow expanding items on single click in XAML
<telerik:RadTreeView x:Name="radTreeView" IsExpandOnSingleClickEnabled="True">
Example 11: Allow expanding items on double click in XAML
<telerik:RadTreeView x:Name="radTreeView" IsExpandOnDblClickEnabled="True">
Example 12: Allow expanding items on single and double click in code
private void ExpandOnSingleClick()
{
radTreeView.IsExpandOnSingleClickEnabled = true;
}
private void ExpandOnDoubleClick()
{
radTreeView.IsExpandOnDblClickEnabled = true;
}
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
RadTreeView and RadTreeViewItem classes has several events for managing the expanding and collapsing processes. The events are available both on the RadTreeView and on the RadTreeViewItem classes.
Example 13: Subscribing to expanding/collapsing events
<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.
Find more information about the RadTreeView events in the Events - Overview topic.
Styling the Expander
The treeview control has a ExpanderStyle property which can be used to style the expander visual. To see how to style the expander, read the Styling Expander article.
Expand All Nodes
There are several ways to expand the treeview items. In general to do this you can set the IsExpanded property of all items to True. This can be done using two approaches - with a style or using the ExpandAll method of the treeview control.
You can define a Style object that targets RadTreeViewItem and set the IsExpanded property to True. The style could be applied using the ItemContainerStyle property of RadTreeView or by making it an implicit style (no x:Key set).
Example 14: Expanding all items via style (ItemContainerStyle)
<FrameworkElement.Resources>
<Style x:Key="ItemContainerStyle" TargetType="telerik:RadTreeViewItem">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</FrameworkElement.Resources>
<telerik:RadTreeView x:Name="radTreeView" ItemContainerStyle="{StaticResource ItemContainerStyle}"/>
Example 15: Expanding all items via style (implicit style)
<FrameworkElement.Resources>
<Style TargetType="telerik:RadTreeViewItem">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</FrameworkElement.Resources>