Delete row in WPF DataGrid

Question

I have a datagrid with the delete icon as one column and the update icon as another column. When you click update, the first cell is set to focus.

When I click on delete, I want to delete this selected row, but I get the error message "Operation is not valid when using ItemsSource. Instead, select and modify items using ItemsControl.ItemsSource." with the following code:

<DataGrid Name="grdList" Margin="3,16,0,5" RowHeight="30" ColumnWidth="*" ItemsSource="{Binding List,Mode=TwoWay}" Width="434" AutoGenerateColumns="False" CanUserAddRows="False" AlternatingRowBackground="#FFB9BBFF"> <DataGrid.Columns> <DataGridTextColumn MinWidth="0" Header="Property" Binding="{Binding Path=Property}"> </DataGridTextColumn> <DataGridTemplateColumn Header="Update" MinWidth="50" MaxWidth="50"> <DataGridTemplateColumn.CellStyle> <Style TargetType="DataGridCell"> <EventSetter Event="PreviewMouseLeftButtonDown" Handler="EventSetter_OnHandler"></EventSetter> </Style> </DataGridTemplateColumn.CellStyle> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="Icons/Update.jpg"> </Image> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn Header="Delete" MinWidth="50" MaxWidth="50"> <DataGridTemplateColumn.CellStyle> <Style TargetType="DataGridCell"> <EventSetter Event="PreviewMouseLeftButtonDown" Handler="EventSetter_OnHandler"></EventSetter> </Style> </DataGridTemplateColumn.CellStyle> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="Icons/Delete.jpg"> </Image> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> private void EventSetter_OnHandler(object sender, MouseButtonEventArgs e) { object source = e.OriginalSource; if (source.GetType() == typeof(Image)) { grdList.IsReadOnly = false; selectedRow = FindParent<DataGridRow>(sender as DependencyObject); if (((DataGridCell)sender).Column.Header.ToString().ToUpperInvariant() == "DELETE") { grdList.Items.Remove(selectedRow); } else { DataGridCellsPanel panel = FindVisualChild<DataGridCellsPanel>(selectedRow); DataGridCell dgc = panel.Children[0] as DataGridCell; dgc.Focus(); grdList.BeginEdit(); e.Handled = true; } } } 

Also how to add the delete function using the "Delete" key along with clicking on the delete cell.

Answer 1

I suspect Delete , i.e. in EventSetter_OnHandler , you must remove items from the Items data collection. Something like that:

 grdList.Items.Remove(someItem); 

But since the error is self-evident

"The operation is not valid while using the ItemsSource. Access and change items instead of ItemsControl.ItemsSource."

You have bound ItemsSource to some collection, so you need to remove the item from it. You cannot modify the Items collection directly when binding ItemsSource with some collection . It should be something like:

 List.Remove(someItem); 

Answer 2

Try it,

 grdList.Items.RemoveAt(grdList.SelectedIndex); 

Answer 3

You can bind the SelectedItem of your DataGrid to a property. Then you can call

 List.Remove(SelectedDataGridItem); 

SelectedDataGridItem is the property that the selected item is bound to

Answer 4

I had the same problem, I solved it like this:

  yourrowbindingobject row = (yourrowbindingobject)yourdatagrid.SelectedItems[0]; ObservableCollection<yourrowbindingobject> data = (ObservableCollection<yourrowbindingobject>)yourdatagrid.ItemsSource; data.Remove(row);