Multi Select Delete in DataGrid in Silverlight 3

Diptimaya Patra
14y
11.6k
0
0
100
Article

Introduction

Previously we have seen how to select a row with the help of RadioButton Column. In this article we will see how we can have a CheckBox Column. And with the help of CheckBox we can multiselect rows and perform delete operation.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as MultiSelectDeleteInDataGrid.

Open the Solution in Expression Blend and add some useful controls such as a DataGrid and a Button.

As you see from above image, I have customized the DataGrid with Template Columns. Follow the below XAML.

<data:DataGrid x:Name="dgPerson" Margin="8" Grid.Column="1" IsReadOnly="True"

Grid.Row="1" AutoGenerateColumns="False">

<data:DataGrid.Columns>

<data:DataGridTemplateColumn Width="80" Header="Select">

<data:DataGridTemplateColumn.CellTemplate>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

<data:DataGridTextColumn Header="Name" Binding="{Binding Name}" MinWidth="120" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>

<data:DataGridTextColumn Header="Age" Binding="{Binding Age}" MinWidth="75" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>

<data:DataGridTextColumn Header="Country" Binding="{Binding Country}" MinWidth="120" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>

<data:DataGridTextColumn Header="Gender" Binding="{Binding Gender}" MinWidth="120" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>

<data:DataGridTextColumn Header="Email Id" Binding="{Binding EmailId}" MinWidth="120" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>

<data:DataGridTextColumn Header="Joined On" Binding="{Binding JoinedOn}" MinWidth="120" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>

</data:DataGrid.Columns>

</data:DataGrid>

Now we will create sample class that will hold the properties and we will create sample data to be shown in DataGrid.

public class Person

{

public string Name { get; set; }

public int Age { get; set; }

public string Country { get; set; }

public string Gender { get; set; }

public string EmailId { get; set; }

public DateTime JoinedOn { get; set; }

}

ObservableCollection<Person> myList;

ObservableCollection<Person> personList = new ObservableCollection<Person>();

        public MainPage()
   {
   InitializeComponent();
   myList = new ObservableCollection<Person>()
   {
   new Person{ Name="Person 1", Age=21, Country="India", Gender="Male", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 2", Age=29, Country="India", Gender="Male", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 3", Age=20, Country="India", Gender="Male", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 4", Age=22, Country="India", Gender="Male", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 5", Age=23, Country="India", Gender="Female", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 6", Age=23, Country="India", Gender="Male", EmailId="[email protected]", JoinedOn=DateTime.Now},
          new Person{ Name="Person 7", Age=25, Country="India", Gender="Female", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 8", Age=25, Country="India", Gender="Female", EmailId="[email protected]", JoinedOn=DateTime.Now},
   new Person{ Name="Person 9", Age=24, Country="India", Gender="Male", EmailId="[email protected]", JoinedOn=DateTime.Now}
   };
   dgPerson.ItemsSource = myList;
   }

Now if you run your application you can see the populated data in DataGrid.

Now we will write few event handlers and add some code into it.

Such as:

DataGrid [LoadingRow]
CheckBox [Checked], [Unchecked]
Button [Click]

We would load the CheckBoxes IsChecked property to false when the DataGrid is reloaded. We would add or remove the selected row content to a list based on check or uncheck of CheckBox. And finally we will perform the Delete operation.

private void chkPerson_Checked(object sender, RoutedEventArgs e)

{

if (this.dgPerson.SelectedItem is Person)

{

personList.Add(((Person)this.dgPerson.SelectedItem));

}

private void chkPerson_Unchecked(object sender, RoutedEventArgs e)
{
   if (this.dgPerson.SelectedItem is Person)
   {
        Person person = this.dgPerson.SelectedItem as Person;
   var item = personList.First(i => i.Name == person.Name);
   personList.Remove(item);
   }
}

private void btnDelete_Click(object sender, RoutedEventArgs e)
{
   string persons = string.Empty;
   foreach (var item in personList)
   {
        myList.Remove(item);
   }
   dgPerson.ItemsSource = myList;
   personList.Clear();
}

private void dgPerson_LoadingRow(object sender, DataGridRowEventArgs e)
{
CheckBox chk = (CheckBox)this.dgPerson.Columns[0].GetCellContent(e.Row);
chk.IsChecked = false;
}