Telerik UI for Silverlight

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.

Here is a snapshot of a regular RadTreeView with a couple of items.

And this is the XAML declaration:

CopyXAML
<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 declaratively

By default the treeview is not editable (its IsEditable property is set to False). In order to enable editing you need to add the following attribute to the RadTreeView declaration:

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

Enable Editing Programmatically

If you want to enable the edit behavior of the treeview in the code-behind, you should set the IsEditable property of an instance of the RadTreeView class to True.

CopyC#
private void EnableTreeViewForEdit()
{
    radTreeView.IsEditable = true;
}
CopyVB.NET
Private Sub EnableTreeViewForEdit()
    radTreeView.IsEditable = True
End Sub

Start Editing by Using Keyboard

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

Start Editing Programmatically

The edit process can be started programmatically (in the code-behind). In order to do that you need to set the IsInEditMode property of an instance of the RadTreeViewItem class to True.

CopyC#
private void StartEdit()
{
    radTreeViewItemFutsal.IsInEditMode = true;
}
CopyVB.NET
Private Sub StartEdit()
    radTreeViewItemFutsal.IsInEditMode = True
End Sub

The next snapshot shows a treeview item which is in edit mode.

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, you need to set the IsInEditMode property of the editing treeview item to False.

CopyC#
private void EndEdit()
{
    radTreeViewItemFutsal.IsInEditMode = false;
}
CopyVB.NET
Private Sub EndEdit()
    radTreeViewItemFutsal.IsInEditMode = False
End Sub

Cancelling the Edit Operation by Using the Keyboard

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

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.

CopyC#
private void CancelEdit()
{
    radTreeViewItemFutsal.CancelEdit();
}
CopyVB.NET
Private Sub CancelEdit()
    radTreeViewItemFutsal.CancelEdit()
End Sub

Events

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

CopyXAML
<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. In the event handlers you can place some code. For example, if you want to access the edited treeview item, then use the following line of code:

CopyC#
private void radTreeView_PreviewEditStarted( object sender, RadRoutedEventArgs e )
{
    RadTreeViewItem targetItem = e.Source as RadTreeViewItem;
}
CopyVB.NET
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 your DataSource with the new value. The Edited event is fired once the new Header text for the item is applied. Via the RadTreeViewItemEditedEventArgs of the PreviewEdited and Edited eventsyou can get access to the new text of the Header property, as well as to the old one.

Note

If your ItemEditTemplate 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:

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

Here is a snapshot of the final result.

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