How to Databind RadTreeView in WPF

Download the source code of the samples here.

This is the first part of a series of posts demonstrating common scenarios of RadTreeView control. I’ll be covering both WPF and Silverlight. 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. In this post I’ll explain 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

1. Define the XML source
2. Define the HierarchicalDataTemplates
3. Set the ItemsSource of RadTreeView

Take a look at the XML data below to see the different XML elements. Basically we have an Artist type which has a collection of Albums; and Album type which has a collection of Songs.

First, for defining the XML data we are using the 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 HierarchicalDataTemplate for each element type from your XML data. Here 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>

 

It’s all set – now the only thing left is to tell the RadTreeView where the data is – we just need to set the ItemsSource property:

<telerik:RadTreeView

 

            ItemsSource="{Binding Source={StaticResource myArtistsData}, XPath=Artist}"/>

 

 

That’s it – we are ready. Check the full source code below. 

 

Binding to a Collection

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

1. Define the Collection
2. Set the HierarchicalDataTemplates for each data type
3. Set the RadTreeView ItemsSource property 

 

 

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 use in order to create the hierarchical view. The grouping of the data can be easily achieved if we use the WPF CollectionViewSource class.

Here are the steps that we need to follow:

1. Define the Collection
2. Configure the CollectionViewSource
   a. Set the Source property to point to our collection
   b. Set the grouping using the GroupDescriptions
3. Declare the HierarchicalDataTemplate
4. Set the RadTreeView ItemsSource to point to the CollectionViewSource

 

 

That's it for now - let me know if you have an interesting scenario that you want to use with RadTreeView - I'll gladly help you!

PS: Our fellows from Silverlightshow.net created a pivot table using our Rad TreeView for Silverlight. Check it out here.

May the source be with you!