WPF 4 DataGrid: Delete Multiple Rows




This article has been guest blogged by Mahesh Sabnis.

The WPF DataGrid has really got me interested to develop line-of-Business application, and I continue using it in different implementations. Read more at WPF: Two way TextBox Binding and WPF 4: Using ObjectDataProvider for DataBinding.

One important observation is that when we use this WPF DataGrid for application development and data representation, there are many occasions where you have to use it for Data manipulations too. In this article, I will demonstrate how to delete multiple rows from the WPF DataGrid.

WPF DataGrid allows us to use inbuilt column types and also allows us to define template columns using various WPF elements e.g. the ComboBox, Image etc. One of the default column template type provided to us, is the CheckBox column. In this article, I have used the same for multiple rows delete from a DataGrid.

Step 1: Create a WPF application and define the following classes in it:

Employee Collection
The above classes represent Employee entity and Data Collection.

Step 2: In the MainWindow.xaml, define the following XAML code:

<Window x:Class="WPF_Application.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow DeleteMultipleRows" Height="426" Width="740"
         Loaded="Window_Loaded">
    
<Grid>
   <TextBlock Height="51" HorizontalAlignment="Left" Margin="37,12,0,0" 
       Name="textBlock1" Width="648"
              Text="Employee Information System" VerticalAlignment="Top" 
       TextAlignment="Center" FontSize="26" />
   <DataGrid AutoGenerateColumns="False" Height="240" 
HorizontalAlignment="Left" Width="648" 
              Margin="37,69,0,0" Name="dgEmp" VerticalAlignment="Top"  
              ColumnWidth="*" RowEditEnding="dgEmp_RowEditEnding" > 
   <DataGrid.Columns> 
   <DataGridTextColumn Binding="{Binding EmpNo}" Header="EmpNo" /> 
   <DataGridTextColumn Binding="{Binding EmpName}" Header="EmpName" /> 
<DataGridTextColumn Binding="{Binding Designation}" Header="Desig" /> 
   <DataGridTextColumn Binding="{Binding Salary}" Header="Salary" /> 
   <DataGridCheckBoxColumn Header="Delete"></DataGridCheckBoxColumn> 
   </DataGrid.Columns> 
   </DataGrid> 
   <Button Content="Delete Rows" Height="23" HorizontalAlignment="Left"  
Margin="37,327,0,0" 
                Name="btnDeleteRows" VerticalAlignment="Top" Width="190" 
Click="btnDeleteRows_Click" />
</Grid> 
</Window>

The above XAML code defines  a DataGrid with various columns bound to the ‘Employee’ class properties. Notice that the DataGrid also defines the ‘DataGridCheckBoxColumn’. We will be using the same checkbox for deleting rows from the DataGrid. To complete the Delete operation, the XAML code also defines a Button element called btnDelete. The DataGrid subscribes to the ‘RowEditing’ event. This event will be raised when the CheckBox is checked in the CheckBoxColumn and control is shifted to the next row.

Step 3: Open MainWindow.xaml.cs and write the following code:

Define following at class level:

List<int> lstSelectedEmpNo;
EmployeeCollection EmpCollection = new EmployeeCollection();
In the loaded event, write the following code:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
dgEmp.ItemsSource = EmpCollection;
lstSelectedEmpNo = new List<int>();
}
The code shown above binds the Employee collection to the DataGrid.

Write the following code in the RowEditing event:

private void dgEmp_RowEditEnding(object sender, 
DataGridRowEditEndingEventArgs e)
{
FrameworkElement element = dgEmp.Columns[4].GetCellContent(e.Row);
if (element.GetType() == typeof(CheckBox))
{
if (((CheckBox)element).IsChecked == true)
{
FrameworkElement cellEmpNo = 
dgEmp.Columns[0].GetCellContent(e.Row);
int EmpNo = Convert.ToInt32(((TextBlock)cellEmpNo).Text);
lstSelectedEmpNo.Add(EmpNo);
}
}
}
The above code reads the content of the fourth column of the DataGrid (the CheckBoxColumn). If the checkbox is checked, then for the selected row of the checked check box, the EmpNo is read and it is added to the ‘lstSelectedEmpNo’ List<T>.

Write the following code in the button ‘Delete Rows’ Click event:

private void btnDeleteRows_Click(object sender, RoutedEventArgs e)
{
try
{
if(lstSelectedEmpNo.Count>0)
{
int count=0;
foreach (int eno in lstSelectedEmpNo)
{
Employee emp = (from ep in EmpCollection
where ep.EmpNo == eno
select ep).First();
EmpCollection.Remove(emp);
count++;
}
MessageBox.Show(count + "Row's Deleted" );
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
The above code deletes the selected EmpNo from the collection.
Step 4: Run the application and the result will as shown below:

WPF DataGrid Delete

Select check-boxes of the rows you want to delete

WPF DataGrid Delete Multiple

Now click on the ‘Delete Rows’ button, the following result will be displayed:

WPF DataGrid Delete Multiple



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

4 Responses to "WPF 4 DataGrid: Delete Multiple Rows"
  1. Misi Moisei said...
    January 30, 2012 at 2:08 AM

    Hi,
    If I want to delete multiple selected rows (without checkboxes)
    dataGridPers.SelectionMode = DataGridSelectionMode.Extended;
    What do I have to change in your code?

  2. vit100 said...
    January 30, 2012 at 7:05 PM

    In dgEmp_RowEditEnding event handler you missed peace of code if checkbox unchecked - in this case you should remove item from lstSelectedEmpNo collection.

  3. Anonymous said...
    February 15, 2012 at 8:57 PM

    This approach is very bad..
    You kind of use data binding, means you try to follow MVVM pattern, and in code behind work with your GUI controls....
    You should work with business object, which is source of the binding, and GUI will update itself..
    Read abt MVVM...

  4. Loupi said...
    March 20, 2012 at 4:48 PM

    I agree with Anonymous,

    MVVM , ApplicationCommands.Delete + command binding + command parameter bound to the SelectedItems property of the DataGrid would do a much better job, with less coupling.

    In fact, except for the command implementation, this is something that requires me 5 lines of XAML code.

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions