ItemEditTemplate

Telerik RadTreeView supports defining a DataTemplate that controls how the items can be edited through the ItemEditTemplate. This tutorial will walk you through the common task of creating and applying an ItemEditTemplate.

The definition of the RadTreeViewSampleData class is the same as in the Binding to Object article.

Defining a RadTreeView and an ItemEditTemplate

Example 1 demonstrates how to define a RadTreeView in xaml and setup a DataTemplate that will be used for editing the items. This DataTemplate is displayed when an item enters edit mode (for example after pressing the F2 key).

Example 1: Defining the ItemEditTemplate

• XAML

<Grid> 
    <Grid.Resources> 
        <sampleData:RadTreeViewSampleData x:Key="DataSource" /> 
 
        <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> 
 
        <DataTemplate x:Key="LeagueItemEditTemplate"> 
            <Grid> 
                <StackPanel Orientation="Horizontal"> 
                    <TextBox Text="{Binding Name, Mode=TwoWay}"/> 
                    <TextBlock Margin="5 0 0 0" Text="{Binding Items.Count, RelativeSource={RelativeSource AncestorType=telerik:RadTreeViewItem}, Mode=OneWay, StringFormat={}{0} children}"/> 
                </StackPanel> 
            </Grid> 
        </DataTemplate> 
    </Grid.Resources> 
    <telerik:RadTreeView x:Name="radTreeView" 
   IsEditable="True" 
   ItemsSource="{Binding LeaguesDataSource, Source={StaticResource DataSource}}" 
   ItemTemplate="{StaticResource League}" Margin="8"  
   ItemEditTemplate="{StaticResource LeagueItemEditTemplate}"/> 
</Grid> 

Figure 1: Result from Example 1 in the Fluent theme

Don't forget to set the IsEditable property of your RadTreeView to True.