How to Add a New Row to DataGrid in MVVM Friendly

Question

I have the following DataGrid

<DataGrid CanUserDeleteRows="True" 
          CanUserAddRows="True"
          SelectedItem="{Binding SelectedResource, Mode=TwoWay}"
          ItemsSource="{Binding Path=Resources, Mode=TwoWay,
                                UpdateSourceTrigger=PropertyChanged, 
                                IsAsync=True}"> ... </<DataGrid>

I am using the MVVM pattern to bind to an ObservableCollection<ResourceViewModel> Resources and this works great. I have a button that adds a new row and this is done by adding a new ResourceViewModel to the Resources collection - great. Now, I want the user to be able to click on the empty last row, and this automatically creates a new record in the DataGrid.

I have made sure the DataGrid has CanUserAddRows=True. I have made sure the class in the collection Resources (ResourceViewModel) that I am binding to has a default constructor (no parameters) and I have made sure the collection type is not readonly. When the user clicks on the last row the default constructor fires but to correctly instantiate the new ResourceViewModel object in need a reference to either the grid of the Resources collection...

I suppose I could use and AttachedCommand on the CellBeginEdit event and then add a new ResourceViewModel to the observable collection there, is there a standard way of doing this?

---

Note, I have read the following questions and these are of no help to me

1. WPF DataGrid - Event for New Rows?
2. How to add rows with a DataGrid and MVVM

---

Edit. It turns out that I am having problems doing this due to a bug in the WPF DataGrid. See Nigel Spencer's Blog. However, his fix is not working for me at the moment...

Answer 1

As far as I understand, you know how to correctly add new items into your data bound collection to result in a new item being added to the DataGrid and your question actually relates to how can you do this when the user clicks on the last row in the DataGrid. The general way to handle some event in the view model is to create an Attached Property (if one does not already exist) that handles that event for you.

For instance, you could create an Attached Property that attaches a handler to the relevant event and another of type ICommand which you could execute when the event handler is called. Then you could write the functionality of that ICommand in your view model (in which you add a new item to your data bound collection) and data bind your ICommand implementation to the Attached ICommand Property.

As I'm fairly sure you know how to define Attached Propertys, I won't insult you by showing you. Please let me know if I have misunderstood you, or not made myself clear.

Answer 2

Here's an attached property that registers a command for adding rows (assuming the source collection contains a generic type argument):

public static readonly DependencyProperty RegisterAddCommandProperty = DependencyProperty.RegisterAttached("RegisterAddCommand", typeof(bool), typeof(DataGridExtensions), new PropertyMetadata(false, OnRegisterAddCommandChanged));
public static bool GetRegisterAddCommand(DependencyObject obj)
{
    return (bool)obj.GetValue(RegisterAddCommandProperty);
}
public static void SetRegisterAddCommand(DependencyObject obj, bool value)
{
    obj.SetValue(RegisterAddCommandProperty, value);
}
static void OnRegisterAddCommandChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    if (sender is DataGrid)
    {
        var DataGrid = sender as DataGrid;
        if ((bool)e.NewValue)
            DataGrid.CommandBindings.Add(new CommandBinding(AddCommand, AddCommand_Executed, AddCommand_CanExecute));
    }
}

public static readonly RoutedUICommand AddCommand = new RoutedUICommand("AddCommand", "AddCommand", typeof(DataGridExtensions));
static void AddCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    var DataGrid = sender as DataGrid;

    var ItemsSourceType = DataGrid.ItemsSource.GetType();
    var ItemType = ItemsSourceType.GetGenericArguments().Single();

    DataGrid.Items.Add(Activator.CreateInstance(ItemType));
}
static void AddCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
    e.CanExecute = (sender as DataGrid).CanUserAddRows;
}

And then you can apply the command to a button somewhere like this:

<Button Command="{x:Static Extensions:DataGridExtensions.AddCommand}"/>

Don't forget to specify the command target.