In this video, I show you how to delete rows from a data grid in WPF using MVVM.
The ability to delete rows from a data grid in WPF using MVVM is a core scenario in just about every WPF application in existence. It’s so common, that you would think this feature would be built into the standard WPF data grid control, but it’s not. This means you are forced to implement this behavior yourself. Luckily, it’s really easy to delete rows from a data grid in WPF. In this video, I’ll show you how using the MVVM pattern.
The first step to delete rows from a data grid in WPF using MVVM is to add a delete button that will actually delete the row from the data grid. You have a couple of options here. You can place a single delete button on the same form as the data grid, and when you click the button it will delete the selected item from the data grid. Another option is to place a delete button on every row of the grid, and then when you click the delete button, it will delete the row in the data grid for that specific row only.
In this video I will add a delete button to each row but adding a DataGridTemplateColumn to the data grid.
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button>Delete</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>I will then create a data binding on the button’s Command property to an ICommand called DeleteCommand that will remove the person from the data grid’s ItemsSource (in this case a property called People) which in turn will delete the row from the data grid. The command looks something like this:
private DelegateCommand<Person> _deleteCommand;
public DelegateCommand<Person> DeleteCommand =>
_deleteCommand ?? (_deleteCommand = new DelegateCommand<Person>(ExecuteDeleteCommand));
void ExecuteDeleteCommand(Person parameter)
{
People.Remove(parameter);
}This is where I see the biggest MVVM mistake made. At this point, most people will create a new ViewModel that represents a row in the data grid. Then they will have a collection of ViewModel, for example a PersonViewModel, to populate the data grid. DON’T DO THIS!!! Instead we are going to define our command in the MainWindowViewModel. Then we simply modify the Command binding to use the ICommand defined on the MainWindowViewMode instead. The button will look something like this:
<Button Command="{Binding DataContext.DeleteCommand, ElementName=_window}" CommandParameter="{Binding}">Delete</Button>This assumes you have given your Window an x:Name=”_window”.
This will tell the button to use the DeleteCommand that we defined on our MainWindowViewModel and passes the current Person (the row’s data context) as the Command Parameter.
Run the application, and you can now delete rows from a data grid in WPF using MVVM.
