How to Databind RadTreeView in WPF

One of the most common scenarios for our customers is populating the RadTreeView with data. In WPF data binding is one of the most powerful concepts. Data binding the Treeview can be done in several ways. This article covers the most common scenarios – binding to an XML file, binding to a Collection, and a more advanced sample – data binding using grouping and CollectionViewSource.

XML Binding

Define the XML source

Define the HierarchicalDataTemplates

Set the ItemsSource of RadTreeView

Take a look at the XML data below to see the different XML elements. There is an Artist type that contains a collection of Albums; and Album type containing a collection of Songs.

To define the XML data we use an XmlDataProvider. You need to point the Source property to the XML file and set the XPath property to the root element of the XML.

<XmlDataProvider

x:Key="myArtistsData"

XPath="/Artists"

Source="DataSources/Artists.XML"/>

Now that we have the data, the next step is to declare the HierarchicalDataTemplates, which will “tell” the RadTreeView how to display the XML data.

You need to define a HierarchicalDataTemplate for each element type from your XML data. Below is the template for the Artist element:

<!-- DataTemplate for Artist type -->

<HierarchicalDataTemplate

DataType="Artist"

ItemsSource="{Binding XPath=Albums/Album}">

<TextBlock FontWeight="Bold"Text="{Binding XPath=@Name}"/>

</HierarchicalDataTemplate>

The only thing left is to tell the RadTreeView where the data is – we just need to set the ItemsSource property, like:

This is probably the easiest way to bind the RadTreeView. Below are the steps:

Define the Collection

Set the HierarchicalDataTemplates for each data type

Set the RadTreeView ItemsSource property

<Grid>

<Grid.Resources>

<!-- Declare the Collection source -->

<sample:LeagueCollection x:Key="MyCollection"/>

<!-- Declare Templates for each data type -->

<DataTemplate x:Key="Team">

<TextBlock Text="{Binding Name}"/>

</DataTemplate>

<HierarchicalDataTemplate

x:Key="Division"

ItemTemplate="{StaticResource Team}"

ItemsSource = "{Binding Teams}">

<TextBlock Text="{Binding Name}"/>

</HierarchicalDataTemplate>

<HierarchicalDataTemplate

x:Key="League"

ItemTemplate="{StaticResource Division}"

ItemsSource = "{Binding Divisions}">

<TextBlock Text="{Binding Name}"/>

</HierarchicalDataTemplate>

</Grid.Resources>

<telerik:RadTreeView

IsLineEnabled="True"

ItemsSource="{Binding Source={StaticResource MyCollection}}"

ItemTemplate="{StaticResource League}"/>

</Grid>

Binding to a CollectionViewSource
(sample is based on Beatriz Costa’s blog)

This is a bit more advanced example. Say you have a flat collection of objects and you want to group it by some common property. For this example we have a collection of animals. Each Animal class has a Category property that we will be used to create a hierarchical view. The grouping of the data can be easily achieved if we use the WPF CollectionViewSource class.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.