ItemTemplateSelector

When binding your RadTreeView to a collection, you are able to configure the visualization of the data and the appearance of the RadTreeViewItems via the ItemTemplate and the ItemTemplateSelectior properties.

If you want to read about the ItemTemplate, see the main topic ItemTemplate.

The purpose of this tutorial is to show you how to create and apply an ItemTemplateSelector.

ItemTemplateSelector Property

The most common use of the "selectors" is to display different kind of data (different kind of items).

To create your own selector you have to use Visual Studio.

Create a class and name it LeagueDataTemplateSelector. The LeagueDataTemplateSelector must inherit from the DataTemplateSelector class, which is located into Telerik.Windows.Controls assembly.

    public class LeagueDataTemplateSelector : DataTemplateSelector 
    { 
    }

    Public Class LeagueDataTemplateSelector 
        Inherits DataTemplateSelector 
    End Class

Override the SelectTemplate method and implement your custom logic in it. The method accepts as arguments an object and a DependencyObject. The object argument is the actual object being bound and the DependecyObject is the container for it.

    private HierarchicalDataTemplate leagueTemplate; 
    private HierarchicalDataTemplate divisionTemplate; 
    private DataTemplate teamTemplate; 
    public LeagueDataTemplateSelector() 
    { 
    } 
    public override DataTemplate SelectTemplate( object item, DependencyObject container ) 
    { 
        if ( item is League ) 
            return this.leagueTemplate; 
        else if ( item is Division ) 
            return this.divisionTemplate; 
        else if ( item is Team ) 
            return this.teamTemplate; 
        return null; 
    } 
    public HierarchicalDataTemplate LeagueTemplate 
    { 
        get 
        { 
            return this.leagueTemplate; 
        } 
        set 
        { 
            this.leagueTemplate = value; 
        } 
    } 
    public HierarchicalDataTemplate DivisionTemplate 
    { 
        get 
        { 
            return this.divisionTemplate; 
        } 
        set 
        { 
            this.divisionTemplate = value; 
        } 
    } 
    public DataTemplate TeamTemplate 
    { 
        get 
        { 
            return teamTemplate; 
        } 
        set 
        { 
            this.teamTemplate = value; 
        } 
    }

        Private leagueTemplate As HierarchicalDataTemplate 
        Private divisionTemplate As HierarchicalDataTemplate 
    Private teamTemplate As DataTemplate 
    Public Sub New() 
    End Sub 
    Public Overloads Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate 
        If TypeOf item Is League Then 
            Return Me.leagueTemplate 
        ElseIf TypeOf item Is Division Then 
            Return Me.divisionTemplate 
        ElseIf TypeOf item Is Team Then 
            Return Me.teamTemplate 
            End If 
 
        Return Nothing 
    End Function 
        Public Property LeagueTemplate() As HierarchicalDataTemplate 
            Get 
                Return Me.leagueTemplate 
            End Get 
            Set(ByVal value As HierarchicalDataTemplate) 
                Me.leagueTemplate = value 
            End Set 
        End Property 
        Public Property DivisionTemplate() As HierarchicalDataTemplate 
            Get 
                Return Me.divisionTemplate 
            End Get 
            Set(ByVal value As HierarchicalDataTemplate) 
                Me.divisionTemplate = value 
            End Set 
        End Property 
    Public Property TeamTemplate() As DataTemplate 
        Get 
            Return teamTemplate 
        End Get 
        Set(ByVal value As DataTemplate) 
            Me.teamTemplate = value 
        End Set 
    End Property

Please note that in order to use the HierarchicalDataTemplate class, you need to add a using for the Telerik.Windows.Controls namespace.

Define the created selector as a resource in your XAML and set it to the ItemTemplateSelector property.

    <UserControl.Resources> 
        <sampleData:RadTreeViewSampleData x:Key="DataSource"/> 
 
        <DataTemplate x:Key="Team"> 
            <TextBlock Text="{Binding TeamName}" Foreground="{Binding TeamColor}"/> 
        </DataTemplate> 
 
        <telerik:HierarchicalDataTemplate x:Key="Division" ItemsSource="{Binding Teams}"> 
            <TextBlock Text="{Binding DivisionName}" Foreground="{Binding DivisionColor}"/> 
        </telerik:HierarchicalDataTemplate> 
 
        <telerik:HierarchicalDataTemplate x:Key="League" ItemsSource="{Binding Divisions}"> 
            <TextBlock Text="{Binding LeagueName}" Foreground="{Binding LeagueColor}" /> 
        </telerik:HierarchicalDataTemplate> 
 
        <example:LeagueDataTemplateSelector x:Key="myDataTemplateSelector" 
            LeagueTemplate="{StaticResource League}" 
            DivisionTemplate="{StaticResource Division}" 
            TeamTemplate="{StaticResource Team}"/> 
 
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot" Background="White"> 
 
        <telerik:RadTreeView x:Name="radTreeView" 
           ItemsSource="{Binding Source={StaticResource DataSource}, Path=LeaguesDataSource}" 
           ItemTemplateSelector="{StaticResource myDataTemplateSelector}"/> 
 
    </Grid>

The data source class RadTreeViewSampleData assigned to the RadTreeView is covered in greater details in the chapter Binding to Object.

    <telerik:RadTreeView 
       ItemsSource="{Binding Source={StaticResource DataSource}, Path=LeaguesDataSource}" 
       ItemTemplateSelector="{StaticResource myDataTemplateSelector}" />

And the result of the demo can be seen on the next figure: Silverlight RadTreeView Item Template Selector

ItemTemplateSelector