Home / Community & Support / Knowledge Base / RadControls for WPF / TreeView / How to Databind RadTreeView in WPF

How to Databind RadTreeView in WPF

Article Info

Rating: 2

Article information

Article relates to

 RadControls for WPF Q2 2008

Created by

 Nikolay Atanasov

Last modified

 Octomber 5th, 2010

Last modified by

 Tina Stancheva

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
  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. 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:

<telerik:RadTreeView 
            ItemsSource="{Binding Source={StaticResource myArtistsData}, XPath=Artist}"/> 
 


Check the full source code below.

<Grid>   
    <Grid.Resources>   
            
        <!-- Xml Datasource -->   
        <XmlDataProvider x:Key="myArtistsData" XPath="/Artists" Source="DataSources/Artists.xml"/>    
            
        <!-- DataTemplate for Artist type -->   
        <HierarchicalDataTemplate     
            DataType="Artist"     
            ItemsSource="{Binding XPath=Albums/Album}">    
            <TextBlock FontWeight="Bold" Text="{Binding XPath=@Name}" />   
        </HierarchicalDataTemplate>   
   
        <!-- DataTemplate for Album type -->   
        <HierarchicalDataTemplate     
            DataType="Album"     
            ItemsSource="{Binding XPath=Songs/Song}">    
            <TextBlock Foreground="Red" Text="{Binding XPath=@Name}" />   
        </HierarchicalDataTemplate>   
   
        <!-- DataTemplate for Song type -->   
        <DataTemplate     
            DataType="Song">    
            <TextBlock FontStyle="Italic" Text="{Binding XPath=@Name}" />   
        </DataTemplate>   
    </Grid.Resources>   
   
    <!-- RadTreeView declaration -->   
    <telerik:RadTreeView     
        ItemsSource="{Binding Source={StaticResource myArtistsData}, XPath=Artist}"/>    
</Grid>   
 

Binding to a Collection

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

  1. Define the Collection
  2. Set the HierarchicalDataTemplates for each data type
  3. 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.

Below are the steps that we need to follow:
  • Define the Collection
  • Configure the CollectionViewSource
    • Set the Source property to point to our collection
    • Set the grouping using the GroupDescriptions
    • Set the Source property to point to our collection
    • Set the grouping using the GroupDescriptions
  • Declare the HierarchicalDataTemplate
  • Set the RadTreeView ItemsSource to point to the CollectionViewSource



<Grid>   
    <Grid.Resources>   
        <!-- Declare the source collection -->   
        <sample:Animals x:Key="AnimalCollection"/>    
            
        <!-- Configure the CollectionViewSource -->   
        <CollectionViewSource     
            x:Key="CVS"     
            Source="{Binding Source={StaticResource AnimalCollection}, Path=AnimalList}">    
            <CollectionViewSource.GroupDescriptions>   
                <PropertyGroupDescription PropertyName="Category"/>    
            </CollectionViewSource.GroupDescriptions>   
        </CollectionViewSource>   
   
        <!-- Set the DataTemplate for the Animal -->   
        <DataTemplate x:Key="AnimalTemplate">    
            <TextBlock Text="{Binding Path=Name}"/>    
        </DataTemplate>   
   
        <!-- Set the HierarchicalDataTemplate -->   
        <HierarchicalDataTemplate x:Key="CategoryTemplate"   
                ItemsSource="{Binding Path=Items}"     
                ItemTemplate="{StaticResource AnimalTemplate}">    
            <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>    
        </HierarchicalDataTemplate>   
    </Grid.Resources>   
   
    <!-- RadTreeView declaration -->   
    <telerik:RadTreeView     
        IsLineEnabled="True"   
        ItemsSource="{Binding Source={StaticResource CVS}, Path=Groups}"     
        ItemTemplate="{StaticResource CategoryTemplate}"/>    
</Grid>   
 

Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.