Silverlight 4: Deleting Multiple Rows from the DataGrid

Tweet

As a Silverlight 4 application developer, I use the Silverlight DataGrid control very frequently. The DataGrid is an excellent control provided for displaying data and manipulating it. One of the nice features of the Silverlight DataGrid is it helps us to add custom columns. Using these custom columns, we can add different controls in the column like a Button, Image, CheckBox, DropDownList etc. for DML operations, data representations and so on. Last week, while conducting a training at one of my clients, a requirement for deleting multiple rows from the DataGrid came up. In the code snippet given below, I have explained the technique of deleting multiple rows in a DataGrid.

Note: I have also written a similar article about WPF 4 DataGrid: Delete Multiple Rows

Step 1: Create a Silverlight application, name it as ‘SL4_Deleting_Multiple_Rows_DataGrid’. To this project, add a class file to store data classes in it as shown below:

The above class file defines collection class for Employees.

Step 2: In MainPage.xaml, add the DataGrid from the toolbox. Create an instance of the above collection class in the XAML using resources. Add columns to the DataGrid. Make sure that the DataGrid defines Template Columns which will contain CheckBox. The XAML code is as shown below:

<UserControl x:Class="SL4_Deleting_Multiple_Rows_DataGrid.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="clr-namespace:SL4_Deleting_Multiple_Rows_DataGrid"
mc:Ignorable="d"
d:DesignHeight="327" d:DesignWidth="637"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Loaded="UserControl_Loaded">
<UserControl.Resources>
<data:EmployeeCollection x:Key="EmpDs"></data:EmployeeCollection>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" 
DataContext="{Binding Source={StaticResource EmpDs}}">
<sdk:DataGrid AutoGenerateColumns="False" Height="227" 
HorizontalAlignment="Left" Margin="25,23,0,0" 
Name="dataGrid1" VerticalAlignment="Top" Width="584"
ItemsSource="{Binding}" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="EmpNo" 
Binding="{Binding EmpNo}">                    
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="EmpName" 
Binding="{Binding EmpName}">                    
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="Salary" 
Binding="{Binding Salary}">                    
</sdk:DataGridTextColumn>
<sdk:DataGridTextColumn Header="Designation" 
Binding="{Binding Designation}">                    
</sdk:DataGridTextColumn>
<sdk:DataGridTemplateColumn Header="Delete?">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Name="chkbkDelete" 
Click="chkbkDelete_Click"></CheckBox>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
<Button Content="Delete Selected Rows" Height="23" 
HorizontalAlignment="Left" Margin="25,267,0,0" 
Name="btnDeleteRows" VerticalAlignment="Top" 
Width="245" Click="btnDeleteRows_Click" />
</Grid>
</UserControl>

The CheckBox in the DataGrid Template Column defines the Click event. When any checkbox   is checked, that row from the DataGrid is considered marked for deletion.

Step 3: Write the following code in MainPage.xaml

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Collections.ObjectModel;

namespace SL4_Deleting_Multiple_Rows_DataGrid
{
public partial class MainPage : UserControl
{
ObservableCollection<Employee> EmptoDelete;
public MainPage()
{
InitializeComponent();
}

private void chkbkDelete_Click(object sender, RoutedEventArgs e)
{
CheckBox chbkDelete = sender as CheckBox;
bool? res = chbkDelete.IsChecked;
if ((bool)res)
{
EmptoDelete.Add(dataGrid1.SelectedItem as Employee);
}
else
{
EmptoDelete.Remove(dataGrid1.SelectedItem as Employee);
}
}

private void btnDeleteRows_Click(object sender, RoutedEventArgs e)
{
try
{
EmployeeCollection EmpCol = 
this.Resources["EmpDs"] as EmployeeCollection;

if (EmptoDelete.Count > 0)
{
int count = 0;
foreach (Employee Emp in EmptoDelete)
{
Employee emp = (from ep in EmpCol
where ep.EmpNo == Emp.EmpNo
select ep).First();
EmpCol.Remove(emp);
count++;
}
EmptoDelete.Clear();
MessageBox.Show(count + "'s Rows Deleted");
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
EmptoDelete = new ObservableCollection<Employee>();
}
}
}

The above code defines an object of the type ObservableCollection<Employee>, ‘EmpToDelete’. This object will contain all Employee objects which are selected by the user by clicking in the CheckBox. The code ‘Delete Rows’ will delete all entries from ‘EmpCol’ Observablecollection<Employee> type by matching the related Employee entries from ‘EmpToDelete’ object.

Step 4: Run the application, click on the CheckBox of the specific row and then click on the ‘Delete Rows’ button, the following result will be displayed:

After clicking on ‘OK’ you will find the rows deleted:


Tweet

About The Author

Mahesh Sabnis is a Microsoft MVP having over 18 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet