Edit this page

ItemEditTemplate

Telerik RadTreeView also supports ItemEditTemplate. This tutorial will walk you through the common task of creating and applying ItemEditTemplate.

For the purpose of this tutorial will be used the following RadTreeView declaration:

<UserControl.Resources>

    <sampleData:RadTreeViewSampleData x:Key="DataSource"/>

    <DataTemplate x:Key="Team">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock Text=" | Count#"/>
            <TextBlock Text="{Binding Count}"/>
        </StackPanel>
    </DataTemplate>

    <telerik:HierarchicalDataTemplate x:Key="Division" ItemTemplate="{StaticResource Team}"
       ItemsSource="{Binding Teams}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}" />
            <TextBlock Text=" | Count#"/>
            <TextBlock Text="{Binding Count}"/>
        </StackPanel>
    </telerik:HierarchicalDataTemplate>

    <telerik:HierarchicalDataTemplate x:Key="League" ItemTemplate="{StaticResource Division}"
       ItemsSource="{Binding Divisions}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}" />
            <TextBlock Text=" | Count#"/>
            <TextBlock Text="{Binding Count}"/>
        </StackPanel>
    </telerik:HierarchicalDataTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

    <telerik:RadTreeView x:Name="radTreeView"
       IsEditable="True"
       ItemsSource="{Binding Source={StaticResource DataSource}, Path=LeaguesDataSource}"
       ItemTemplate="{StaticResource League}" />

</Grid>

ItemEditTemplate Property

In this tutorial an ItemEditTemplate will be created with Expression Blend.

  • Open your application and select the treeview control.

  • Right-click on it or right-click in the scene explorer and choose EditAdditionalTemplates->Edit ItemEditTemplate->Create Empty.

  • Choose a name for the data template and where to be defined in:

    Defining the template in the Application section makes it reusable from everywhere in the application.

  • Drag and drop the controls you need for the template and configure their properties. In the example are used a TextBox and a RadMaskedNumericInput

  • Configure the binding for the Text property of the TextBox, and for the Value property of the RadMaskedNumericInput.

  • Bind the TextBox Text property to the Name property of the business object and set the binding to be TwoWay.

  • Do the same for the Value property of the RadMaskedNumericInput.

Here is the final XAML:

<DataTemplate x:Key="LeagueItemEditTemplate">
 <Grid>

  <StackPanel Orientation="Horizontal">

   <TextBox Text="{Binding Name, Mode=TwoWay}"/>
   <telerik:RadMaskedNumericInput Mask="#" Value="{Binding Count, Mode=OneWay}"/>

  </StackPanel>

 </Grid>
</DataTemplate>
................
<telerik:RadTreeView x:Name="radTreeView"
   IsEditable="True"
   ItemsSource="{Binding LeaguesDataSource, Source={StaticResource DataSource}}"
   ItemTemplate="{StaticResource League}" Margin="8" 
   ItemEditTemplate="{StaticResource LeagueItemEditTemplate}"/>

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

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy