Add a new treeview item with a default name in edit mode

Environment

Product

RadTreeView for WPF

Description

How to allow the user to edit an item that is added to the RadTreeView.

Solution

Make sure that the IsInEditMode property of the item is set to True after the RadTreeViewItem is loaded. Examples 1 and 2 demonstrate how you can achieve that in an MVVM scenario.

Example 1 demonstrates a sample implementation of a model and a viewmodel that contains a collection of models as well as a command for adding new items.

Example 1: The Model and ViewModel

public class Team : ViewModelBase 
{ 
    private string name = ""; 
    private bool isInEditMode; 
 
    public string Name 
    { 
        get { return this.name; } 
        set 
        { 
            if (this.name != value) 
            { 
                this.name = value; 
                this.OnPropertyChanged("Name"); 
            } 
        } 
    } 
 
    public bool IsInEditMode 
    { 
        get 
        { 
            return this.isInEditMode; 
        } 
        set 
        { 
            if (this.isInEditMode != value) 
            { 
                this.isInEditMode = value; 
                this.OnPropertyChanged("IsInEditMode"); 
            } 
        } 
    } 
 
    public static ObservableCollection<Team> GetTeams() 
    { 
        var teams = new ObservableCollection<Team>(); 
 
        for (int i = 0; i < 5; i++) 
        { 
            teams.Add(new Team() { Name = "Team " + i }); 
 
        } 
 
        return teams; 
    } 
} 
 
public class ViewModel 
{ 
    private ObservableCollection<Team> teams; 
 
    public ViewModel() 
    { 
        this.AddItemCommand = new DelegateCommand(OnAddItem); 
    } 
 
    public DelegateCommand AddItemCommand { get; } 
 
    public ObservableCollection<Team> Teams 
    { 
        get 
        { 
            if (this.teams == null) 
            { 
                this.teams = Team.GetTeams(); 
            } 
 
            return this.teams; 
        } 
    } 
 
    private void OnAddItem(object obj) 
    { 
        var itemToAdd = new Team() { Name = "Added from button" }; 
        this.Teams.Add(itemToAdd); 
 
        // We need to make sure that the new item is loaded before it enters edit mode 
        Dispatcher.CurrentDispatcher.BeginInvoke(new Action(() => 
        { 
            itemToAdd.IsInEditMode = true; 
        }), DispatcherPriority.Loaded); 
    } 
} 

Public Class Team 
    Inherits ViewModelBase 
 
    Private _name As String = "" 
    Private _isInEditMode As Boolean 
 
    Public Property Name() As String 
        Get 
            Return Me._name 
        End Get 
        Set(ByVal value As String) 
            If Me._name <> value Then 
                Me._name = value 
                Me.OnPropertyChanged("Name") 
            End If 
        End Set 
    End Property 
 
    Public Property IsInEditMode() As Boolean 
        Get 
            Return Me._isInEditMode 
        End Get 
        Set(ByVal value As Boolean) 
            If Me._isInEditMode <> value Then 
                Me._isInEditMode = value 
                Me.OnPropertyChanged("IsInEditMode") 
            End If 
        End Set 
    End Property 
 
    Public Shared Function GetTeams() As ObservableCollection(Of Team) 
        Dim teams = New ObservableCollection(Of Team)() 
 
        For i As Integer = 0 To 4 
            teams.Add(New Team() With {.Name = "Team " & i}) 
 
        Next i 
 
        Return teams 
    End Function 
End Class 
 
Public Class ViewModel 
    Private _teams As ObservableCollection(Of Team) 
 
    Public Sub New() 
        Me.AddItemCommand = New DelegateCommand(AddressOf OnAddItem) 
    End Sub 
 
    Public ReadOnly Property AddItemCommand() As DelegateCommand 
 
    Public ReadOnly Property Teams() As ObservableCollection(Of Team) 
        Get 
            If Me._teams Is Nothing Then 
                Me._teams = Team.GetTeams() 
            End If 
 
            Return Me._teams 
        End Get 
    End Property 
 
    Private Sub OnAddItem(ByVal obj As Object) 
        Dim itemToAdd = New Team() With {.Name = "Added from button"} 
        Me.Teams.Add(itemToAdd) 
 
        ' We need to make sure that the new item is loaded before it enters edit mode 
        Dispatcher.CurrentDispatcher.BeginInvoke(New Action(Sub() 
            itemToAdd.IsInEditMode = True 
        End Sub), DispatcherPriority.Loaded) 
    End Sub 
End Class 

Example 2 shows how the RadTreeView is setup. Note, that the ItemEditTemplate is set along with a style binding the IsInEditMode property of the RadTreeViewItem to the property in our model.

Example 2: The view

<Grid> 
    <Grid.DataContext> 
        <local:ViewModel /> 
    </Grid.DataContext> 
    <Grid.Resources> 
        <DataTemplate x:Key="ItemEditTemplate"> 
            <TextBox Text="{Binding Name}" /> 
        </DataTemplate> 
 
        <!-- If you are using the NoXaml dlls, you should base the style on the default one for the theme like so--> 
        <!-- <Style TargetType="telerik:RadTreeViewItem" BasedOn="{StaticResource RadTreeViewItemStyle}"> --> 
        <Style TargetType="telerik:RadTreeViewItem" > 
            <Setter Property="IsInEditMode" Value="{Binding IsInEditMode}" /> 
        </Style> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition /> 
    </Grid.RowDefinitions> 
 
    <Button Content="Add item in edit mode" Command="{Binding AddItemCommand}" /> 
    <telerik:RadTreeView Grid.Row="1" 
                        ItemEditTemplate="{StaticResource ItemEditTemplate}" 
                        IsEditable="True" 
                        IsVirtualizing="True" 
                        DisplayMemberPath="Name" 
                        ItemsSource="{Binding Teams}"> 
    </telerik:RadTreeView> 
</Grid> 

Figure 1: Result after the add button is clicked in the Fluent theme

See Also

• How to Edit An Item