RadTreeView lets users select single or multiple nodes by simply setting the SelectionMode property. Furthermore, you can manage the selection process by events exposed by the RadTreeViewItem and RadTreeView classes. This tutorial will walk you through the common tasks of:
Selecting an Item Declaratively and Programmatically
If you want to select an item you need to set the RadTreeViewItem's IsSelected property to True.
CopyXAML
<telerik:RadTreeViewItem x:Name="radTreeViewItem" IsSelected="True"/>
CopyC#
radTreeViewItem.IsSelected = true;
CopyVB.NET
radTreeViewItem.IsSelected = True
Note |
|---|
Note, that the code snippets above cover scenario when your RadTreeView is populated declaratively (with static data). If you want to bind the IsSelected property to a property of a custom business object, check out the Binding the IsSelected Property section at the end of this topic.
|
Selecting an Item by Using the SelectedItems Collection
Another way to select a treeview item programmatically is to add it to the SelectedItems collection of the RadTreeView class. There are two possible cases here, depending on how the RadTreeView is populated.
-
If your RadTreeView is populated declaratively in XAML (with static data), then the SelectedItems collection will contain instances of the RadTreeViewItem class.
CopyC#
radTreeView.SelectedItems.Add( radTreeViewItem );
CopyVB.NET
radTreeView.SelectedItems.Add(radTreeViewItem)
-
In case your RadTreeView is data bound to a business object, then the situation is different. The SelectedItems collection will contain instances of your business object.
CopyC#
radTreeView.SelectedItems.Add( myViewModel );
CopyVB.NET
radTreeView.SelectedItems.Add(myViewModel)
Changing the Selection Mode
The RadTreeView API allows you to change the selection mode of the treeview. You need to set the SelectionMode property to do that. The SelectionMode property is a SelectionMode enumeration which exposes the following members:
Note |
|---|
There are two SelectionMode enumerations:
- System.Windows.Controls.SelectionMode
- Telerik.Windows.Controls.SelectionMode
If you intend to change the SelectionMode in the code-behind you need to use the second one:
CopyC# private void ChangeSelectionMode()
{
radTreeView.SelectionMode = Telerik.Windows.Controls.SelectionMode.Multiple;
}
CopyVB.NET Private Sub ChangeSelectionMode()
radTreeView.SelectionMode = Telerik.Windows.Controls.SelectionMode.Multiple
End Sub |
The next example demonstrates you how to set the SelectionMode property.
CopyXAML
<telerik:RadTreeView x:Name="radTreeView" SelectionMode="Multiple">
As you can see from the snapshot below, now you are able to select more than on item (node).
Tip |
|---|
|
The default selection of the RadTreeView is Single.
|
Accessing the Selected Item(s)
RadTreeView class exposes several properties which allow you to access the currently selected item(s).
- SelectedItem - returns the currently selected item.
- SelectedItems - this property returns a collection representing the currently selected items. It is appropriate to use SelectedItems property when you have multiple selected items. SelectedItems is a ObservableCollection of objects.
- SelectedContainer - gets the current selected item container. This property is always of type RadTreeViewItem.
Again, you have two possible cases:
-
Your RadTreeView is populated declaratively in XAML (with static data). In this case, the SelectedItem and SelectedContainer properties will return you objects of type RadTreeViewItem. Respectively the SelectedItems collection contains RadTreeViewItems.
-
Your RadTreeView is data bound to a business object. In this case, the SelectedItem property will be an instance of your business object. The SelectedItems collection will contain instances of your business object. The SelectedContainer property again will return RadTreeViewItem.
Note |
|---|
When you have multiple selected items, the SelectedItem property will return the first selected item in the treeview.
|
Note |
|---|
When you reset the RadTreeView'sItems collection (when you invoke the RadTreeView.Items.Clear() method), that will result also in clearing the SelectedItems collection.
|
Note |
|---|
Telerik RadTreeView class inherits from ItemsControl. The Items collection of the ItemsControl is a collection of data objects, not from RadTreeViewItems. There is a very important concept about the items and item containers. For more information read here.
|
Note |
|---|
Each ItemsControl provides two additional properties for working with selection - SelectedValue and SelectedValuePath. If want to learn how to use these two properties, please check out the Using SelectedItem, SelectedValue and SelectedValuePath section at the end of this topic.
|
Events
The Telerik RadTreeView and RadTreeViewItem classesoffer you five events for managing the edit process.
CopyXAML
<telerik:RadTreeView x:Name="radTreeView"
PreviewSelected="radTreeView_PreviewSelected"
Selected="radTreeView_Selected"
PreviewUnselected="radTreeView_PreviewUnselected"
Unselected="radTreeView_Unselected"
SelectionChanged="radTreeView_SelectionChanged"/>
The PreviewSelected event occurs when the treeview item is about to be selected. The Selected event is fired when the treeview item is already selected. The type of the passed event arguments for both of the events is RadRoutedEventArgs. In the event handlers you can place some code.
For example, the next code snippet will change the FontSize of the selected item.
CopyC#
private void radTreeView_Selected( object sender, RadRoutedEventArgs e )
{
( e.Source as RadTreeViewItem ).FontSize = 14;
}
CopyVB.NET
Private Sub radTreeView_Selected(ByVal sender As Object, ByVal e As RadRoutedEventArgs)
TryCast(e.Source, RadTreeViewItem).FontSize = 14
End Sub
The PreviewUnselected event is fired just before the currently selected item is unselected. The Unselected event occurs when the treeview item is already unselected. The type of the passed event arguments for both of the events is RadRoutedEventArgs.
In order to hangle a change in the selection you need to use the SelectionChanged event. This event is available only for the RadTreeView class. It is fired each time an item(s) is/are added or removed from the selection. The type of the passed event arguments for the event is SelectionChangedEventArgs. Here is a sample code for handling the SelectionChanged event.
CopyC#
private void radTreeView_SelectionChanged( object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e )
{
Telerik.Windows.Controls.RadTreeView treeView = sender as Telerik.Windows.Controls.RadTreeView;
ObservableCollection<Object> selectedItems = treeView.SelectedItems;
IList addedItems = e.AddedItems;
IList removedItems = e.RemovedItems;
}
CopyVB.NET
Private Sub radTreeView_SelectionChanged(ByVal sender As Object, ByVal e As Telerik.Windows.Controls.SelectionChangedEventArgs)
Dim treeView As Telerik.Windows.Controls.RadTreeView = TryCast(sender, Telerik.Windows.Controls.RadTreeView)
Dim selectedItems As ObservableCollection(Of [Object]) = treeView.SelectedItems
Dim addedItems As IList = e.AddedItems
Dim removedItems As IList = e.RemovedItems
End Sub Note |
|---|
Four out of the five events (PreviewSelected, Selected, PreviewUnselected and Unselected) are exposed by both RadTreeView and RadTreeViewItem classes. While the SelectionChanged event is available only in the RadTreeView class.
|
Using the SelectedItem, SelectedValue and SelectedValuePath Properties
The SelectedValue property is used when you have linked your RadTreeView to a data source, and you want to return a value other than the one which is displayed. The SelectedValuePath property provides a way to specify a SelectedValue for the SelectedItem in a RadTreeView. The SelectedItem represents an object in the Items collection and the RadTreeView displays the value of a single property of the selected item. The SelectedValuePath property specifies the path to the property that is used to determine the value of the SelectedValue property. The next example illustrates this concept.
Imagine that you have a business object named MyViewModel, with three members (properties): Title, Price and Children. And a RadTreeView which is data bound to a list of MyViewModel objects. The Title property is the property which is displayed. The Price is set to the SelectedValuePath property.
CopyC#
private class MyViewModel
{
public string Title
{
get;
set;
}
public string Price
{
get;
set;
}
public IList<MyViewModel> Children
{
get;
set;
}
}
CopyVB.NET
Private Class MyViewModel
Private _Title As String
Public Property Title() As String
Get
Return _Title
End Get
Set(ByVal value As String)
_Title = value
End Set
End Property
Private _Price As String
Public Property Price() As String
Get
Return _Price
End Get
Set(ByVal value As String)
_Price = value
End Set
End Property
Private _Children As IList(Of MyViewModel)
Public Property Children() As IList(Of MyViewModel)
Get
Return _Children
End Get
Set(ByVal value As IList(Of MyViewModel))
_Children = value
End Set
End Property
End Class
CopyXAML
<telerik:RadTreeView x:Name="radTreeView" SelectedValuePath="Price">
<telerik:RadTreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">
<TextBlock Text="{Binding Title}" />
</HierarchicalDataTemplate>
</telerik:RadTreeView.ItemTemplate>
</telerik:RadTreeView>
When you select a MyViewModelTitle from the RadTreeView, the SelectedItem property returns the MyViewModel data item that corresponds to the selected Title. However, because the SelectedValuePath of this RadTreeView is set to the MyViewModel's Price property, the SelectedValue will return the Price property of the MyViewModel business object (e.g. 101.56$).
Binding the IsSelected Property
A very common issue is to have the RadTreeViewItem's IsSelected property bound to a property of a custom business object. The easiest way to achieve this is to use Style Binding. For example, imagine your business object has a boolean property named IsSelected. And you want to bind the IsSelected property of this business object to the IsSelected property of the RadTreeViewItem. Then check out the code snippet below, it demonstrates how to achieve this.
CopyXAML
<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
<HierarchicalDataTemplate
x:Key="MyViewModelTemplate">
<TextBlock Text="{Binding Name}" Foreground="Red" FontSize="16" FontFamily="Verdana" />
</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