C# MVVM: Edit a SelectedItem of an ObservableCollection with a RelayCommand

Question

I am quiet new to programming and am currently learning C# and the MVVMC pattern (which is I think basically the same as MVVM pattern).

I need to code a database tool for ChiliPlants for university. There you should be able to edit an existing item from an ObservableCollection.

This ObservableCollection I displayed in a DataGrid, see this:DataGrid Below the DataGrid there are three buttons: Add, Edit and Delete. I was able to programm the AddButton, aswell as the DeleteButton.

Unfortunately I don't know how to programm the EditButton. It should open a new window, where the SelectedItem should be opened like this:EditWindow

Until now my EditButton does the same thing as my AddButton.

See my code here:

View:

<StackPanel Grid.Row="1" Orientation="Horizontal">
        <Button Content="Add" Margin="5,5,0,5" Width="100" Command="{Binding AddCommand}" />
        <Button Content="Edit" Margin="5,5,0,5" Width="100" Command="{Binding EditCommand}" />
        <Button Content="Delete" Margin="5,5,540,5" Width="100" Command="{Binding DeleteCommand}" />
        <Button Content="Sichern" Margin="5,5,5,5" Width="100" Command="{Binding SaveCommand}" />
</StackPanel>

ViewModel:

    private ICommand _editCommand;

    public ICommand EditCommand
    {
        get { return _editCommand; }
        set { _editCommand = value; }
    }

Controller:

public void SDInitialize()                                          
    {
        var view = new WindowStammdatenverwaltung();

        mViewModel = new WindowStammdatenverwaltungViewModel
        {
            EditCommand = new RelayCommand(EditCommandExecute, EditCommandCanExecute)
        };
        view.DataContext = mViewModel;
        view.ShowDialog();
    }

private void EditCommandExecute(object obj)
    {
        var editedObject = new WindowEditController().EditChiliModel();
        if (editedObject != null)
        {
            mViewModel.Stock.Add(mViewModel.SelectedChili);
        }
    }

private bool EditCommandCanExecute(object obj)
    {
        return mViewModel.SelectedChili != null;
    }

The problem is with the EditCommandExecute. Currently I have just put the Code for an AddCommandExecute in there. I unfortunately don't know how to code such an EditCommandExecute.

My WindowEditController looks like this:

public class WindowEditController
{
    WindowEdit mView;

    public ChiliModel EditChiliModel()
    {
        mView = new WindowEdit();
        WindowEditViewModel mViewModel = new WindowEditViewModel
        {
            ChiliModel = new ChiliModel(),
            OkCommand = new RelayCommand(ExecuteOkCommand),
            CancelCommand = new RelayCommand(ExecuteCancelCommand),
        };
        mView.DataContext = mViewModel;
        if (mView.ShowDialog() == true)
        {
            return mViewModel.ChiliModel;
        }
        else
        {
            return null;
        }
    }

    private void ExecuteOkCommand(object obj)
    {
        mView.DialogResult = true;
        mView.Close();
    }

    private void ExecuteCancelCommand(object obj)
    {
        mView.DialogResult = false;
        mView.Close();
    }

I know, that I could let the user edit the SelectedItem inside the DataGrid, but this is not allowed in my task...

Could I maybe use the same window as for my AddCommand? Basically they should look the same, the EditWindow should just already contain the information of the SelectedItem.

I looked up almost every entry similar to this topic, but I did not find a simple solution. Or a solution which I was able to understand with my bad coding skills :( ...

I would be very happy if you guys could help me. Please keep it simple for this newbie :)

What I already tried:

I tried to add a CommandParameter to my Button looking like this: CommandParameter="{Binding SelectedItem, ElementName=StockDataGrid}" But this still didn't open the window containing the data of the SelectedItem. It just opened a completely new Window for a new Item.

score 2 · Answer 1 · answered May 28 '16 at 23:09

2

Use CommandParameter just after the Command property, and bind it to the SelectedItem of the DataGrid.

For example, suppose that you DataGrid has the attribute Name=MyDataGrid.

The Button becomes:

<Button Content="Edit"
        Margin="5,5,0,5"
        Width="100"
        Command="{Binding EditCommand}"
        CommandParameter="{Binding SelectedItem, ElementName=MyDataGrid}"/>

When EditCommandExecute(object obj) is executed, obj is actually the current SelectedItem that you want.

answered May 28 '16 at 23:09

Massimiliano Kraus

3,638
5
27
47

Unfortunately that does not work in my solution, maybe I have done something wrong, but just adding the `CommandParameter` from your suggestion won't work. I also tried following `CommandParameter`: `"{Binding SelectedChili}"` (this is the Property bound to the SelectedItem Property of my DataGrid) and `"{Binding SelectedChili, ElementName=StockDataGrid}"` I fear that there has to be something else corrected. I will put some additional code in the question. – ccdreyer May 29 '16 at 08:05
It will work, if you use the data in the right way in your `EditCommandExecute` - don't add a new entry, fill the `AddWindow` with the existing data, and later on if the user clicks ok, take the changed data and update the item that was passed into your command. You'll want to make an `EditWindow` anyway, because the user won't expect to edit data in a window called Hinzufügen :-) – Haukinger May 29 '16 at 08:23
1

@Haukinger Could you maybe help me with that? I don't know exacty how to do what you described... I now made a new Window called WindowEdit, a WindowEditViewModel and a WindowEditController. I will also update the code in my question. Thank you very much in advance. – ccdreyer May 29 '16 at 09:48
I'd take the command parameter, fetch the data, put it in an EditWindowViewModel, show the EditWindow, and finally, if the user clicked Ok, take the data from the view model an put it back in the command parameter. You can email me at stackoverflow at haukinger dot de if you want to discuss this further, that's preferrable to a comment discussion here on a hijacked answer, I suppose... – Haukinger May 29 '16 at 10:23
A question: The property SelectedChili raises change notifications? Second question: what does not work with CommandParameter? Check the Output Console in Visual Studio to see if you have some Binding error (that happens if the binding engine of WPF cannot find the source property you indicated. – Massimiliano Kraus May 29 '16 at 10:28
@MK87: Yes, the SelectedChili raises change notifications... I will doublecheck the bindings :) – ccdreyer May 29 '16 at 15:31

C# MVVM: Edit a SelectedItem of an ObservableCollection with a RelayCommand

1 Answers1