How to Edit an Item

RadTreeView supports editing the displayed text of the item. The purpose of this tutorial is to show you:

  • How to enable/disable the item editing behavior.
  • How to start, end and cancel editing declaratively and programmatically.
  • What kind of events the treeview API offers you for managing the edit process.

Figure 1: RadTreeView with several items

Silverlight RadTreeView RadTreeView with several items

Example 1: RadTreeView populate with several items

<telerik:RadTreeView Margin="8" x:Name="radTreeView"> 
    <telerik:RadTreeViewItem Header="Sport Categories"> 
        <telerik:RadTreeViewItem Header="Football"> 
            <telerik:RadTreeViewItem Header="Futsal" 
        x:Name="radTreeViewItemFutsal"/> 
            <telerik:RadTreeViewItem Header="Soccer"/> 
        </telerik:RadTreeViewItem> 
        <telerik:RadTreeViewItem Header="Tennis"/> 
        <telerik:RadTreeViewItem Header="Cycling"/> 
    </telerik:RadTreeViewItem> 
</telerik:RadTreeView> 

Enable Editing

By default the treeview is not editable. In order to enable editing you need to set the IsEditable property of RadTreeView to True. The default value is False.

Example 2: Enable editing in XAML

<telerik:RadTreeView Margin="8" x:Name="radTreeView" IsEditable="True"> 

Example 3: Enable editing in code

radTreeView.IsEditable = true; 
radTreeView.IsEditable = True 

Toggle Editing by Using Keyboard

Once the edit behavior is enabled, you can start the editing process by selecting an item and pressing the F2 key.

If you want to cancel the current edit operation and to preserve any text changes, you should press the Esc key.

Toggle Editing Programmatically

You can manually enter or exit the edit mode of RadTreeViewItem by setting its IsInEditMode.

Example 4: Start editing via code

radTreeViewItem.IsInEditMode = true;     
radTreeViewItem.IsInEditMode = True 

Figure 2: RadTreeViewItem in edit mode

Silverlight RadTreeView RadTreeViewItem in edit mode

Example 5: Exit editing via code

radTreeViewItem.IsInEditMode = false; 
radTreeViewItem.IsInEditMode = False 

Setting the IsInEditMode property to False don't save the changes explicitly. To do so call the CommintEdit() method.

Saving the Changes by Using the Keyboard

After entering the new text, in order to save your changes you should press the Enter key.

Saving the Changes Programmatically

If you want to finish the process of editing in code-behind and to save the changes manually, you need to call the CommitEdit() method of the corresponding RadTreeViewItem.

Example 6: Commit changes

radTreeViewItem.CommitEidt(); 
radTreeViewItem.CommitEidt(); 

Cancelling the Edit Operation Programmatically

In order to cancel the edit process in the code-behind you need to invoke the CancelEdit() method of the editing treeview item. This method discards modifications to data since the last save.

Example 5: Cancel editing

radTreeViewItemFutsal.CancelEdit(); 
radTreeViewItemFutsal.CancelEdit() 

Events

The Telerik RadTreeView and RadTreeViewItem classes offer you several events for managing the edit process. These events are available both on the RadTreeView and on the RadTreeViewItem classes.

Example 6: Subscribing to edit events

<telerik:RadTreeView Margin="8" x:Name="radTreeView" IsEditable="True" 
        PreviewEditStarted="radTreeView_PreviewEditStarted" 
        EditStarted="radTreeView_EditStarted" 
        PreviewEdited="radTreeView_PreviewEdited" 
        EditCanceled="radTreeView_EditCanceled" 
        Edited="radTreeView_Edited"> 

The PreviewEditStarted event occurs when the treeview item is about to be edited. The EditStarted event is fired when the treeview item is already in edit mode. The type of the passed event arguments for both of the events is RadRoutedEventArgs.

Example 7: Accessing the editing RadTreeViewItem in the PreviewEditStarted event handler

private void radTreeView_PreviewEditStarted( object sender, RadRoutedEventArgs e ) 
{ 
    RadTreeViewItem targetItem = e.Source as RadTreeViewItem; 
} 
Private Sub radTreeView_PreviewEditStarted(ByVal sender As Object, ByVal e As RadRoutedEventArgs) 
    Dim targetItem As RadTreeViewItem = TryCast(e.Source, RadTreeViewItem) 
End Sub 

The PreviewEdited event is fired just before the new Header text of the item is applied. If the treeview is data bound you can update the data source with the new value. The Edited event is fired once the new Header text for the item is applied. You can get access to the new text of the Header property, as well as to the old one, via the RadTreeViewItemEditedEventArgs of the PreviewEdited and Edited events.

Figure 3: Getting the header text

Silverlight RadTreeView Getting the header text

If the the ItemEditTemplate property is set and it does not contain a TextBox, then the NewText and OldText properties will not be used.

In the event handler you can place some code that has to be executed when the item is edited. For example, change the background color of the edited item:

Example 8: Setting the background of the edited RadTreeViewItem

private void radTreeView_Edited( object sender, RadTreeViewItemEditedEventArgs e ) 
{ 
    ( e.Source as RadTreeViewItem ).Background = new SolidColorBrush( Colors.Red ); 
} 
Private Sub radTreeView_Edited(ByVal sender As Object, ByVal e As RadTreeViewItemEditedEventArgs) 
    TryCast(e.Source, RadTreeViewItem).Background = New SolidColorBrush(Colors.Red) 
End Sub 

Figure 4: RadTreeViewItem with its background changed on edit

Silverlight RadTreeView RadTreeViewItem with its background changed on edit

ItemEditTemplate and ItemEditTemplateSelector

Telerik RadTreeView also supports ItemEditTemplate and ItemEditTemplateSelector. To learn more on how to do that, visit the Item Edit Template and Item Edit Template Selector topics.

See Also

In this article