MVVM Add/Delete Item

[luc]

Hi,

I have a simple project with a RadTreeView and two button (add/delete) bind to ICommand from my model.

<Window.Resources>
    <Style x:Key="itemStyle"  TargetType="telerik:RadTreeViewItem">
        <Setter Property="IsSelected" Value="{Binding Path=Select, Mode=TwoWay}" />
        <Setter Property="IsExpanded" Value="{Binding Path=Expand, Mode=TwoWay}" />
        <Setter Property="IsInEditMode" Value="{Binding Path=EditMode, Mode=TwoWay}" />
    </Style>
</Window.Resources>

<DockPanel>
    <StackPanel Orientation="Vertical" DockPanel.Dock="Bottom">
        <Button Command="{Binding AddCommand}">Add Person</Button>
        <Button Command="{Binding DeleteCommand}">Delete current</Button>
    </StackPanel>
    <telerik:RadTreeView IsEditable="True" ItemsSource="{Binding Persons}" ItemContainerStyle="{StaticResource itemStyle}" SelectedItem="{Binding Path=Current, Mode=TwoWay}">
        <telerik:RadTreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Childs}">
                <TextBlock Text="{Binding Name}"/>
            </HierarchicalDataTemplate>
        </telerik:RadTreeView.ItemTemplate>
    </telerik:RadTreeView>
</DockPanel>

1 When I try to add an item my AddCommand add a item in my binding collection

Persons.Add(new PersonViewModel(new Model.Person("New person", new string[]{})) { Select=true, EditMode=true});

With this way the RadTreeViewItem is well editing but fill with text "RadTreeSample.ViewModel.PersonViewModel" and not "New Person". If i change EditMode=true to EditMode=false the item is well selected and well filled and i can edit correctly after. How to enable EditMode correctly ?

2 When i delete an item it will be fun if previous item become selected. First idea was to change the selected item in the DeleteCommand BUT i think that it's not the job of the ViewModel, it's typically a job for the View. How can i implement this ? The goal is that View and ViewModel have no reference between them.

if (Current != null)
{
    if (Current.Parent != null) Current.Parent.Childs.Remove(Current);
    else person.Remove(Current);
    // Not the role to viewmodel to select another element
}

[Petar Mladenov]

Hi Luc,

 In order to correctly use the edit mode in your case, you have to add ItemEditTemplate for example like so:

<Window.Resources>
        <Style x:Key="itemStyle" TargetType="telerik:RadTreeViewItem">
            <Setter Property="IsSelected" Value="{Binding Path=Select, Mode=TwoWay}" />
            <Setter Property="IsExpanded" Value="{Binding Path=Expand, Mode=TwoWay}" />
            <Setter Property="IsInEditMode" Value="{Binding Path=EditMode, Mode=TwoWay}" />
        </Style>

        <DataTemplate x:Key="edittemplate">
            <TextBox Text="{Binding Name, Mode=TwoWay}" />
        </DataTemplate>
    </Window.Resources>

<telerik:RadTreeView IsEditable="True"
                            x:Name="tree"
                            ItemContainerStyle="{StaticResource itemStyle}"
                            ItemsSource="{Binding Persons}"
                            SelectedItem="{Binding Path=Current, Mode=TwoWay}"
                            ItemEditTemplate="{StaticResource edittemplate}">

On the other hand, your delete Commands need the SelectedItem from the TreeView as a parameter:

<Button Command="{Binding DeleteCommand}" CommandParameter="{Binding ElementName=tree, Path=SelectedItem}">Delete current</Button>

Then in the Execute method you can only work with the ViewModels ( the Parent  and the Select properties from the Person class). You can find this approach realized in the attached solution. Please let us know if you have further questions. All the best,
Petar Mladenov
the Telerik team

[luc]

It's working fine.
Thanks