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

C#

	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);
        }
    }

VB.NET

	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

XAML

    <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