Multi Select Delete in DataGrid in Silverlight 3

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>

                            <CheckBox x:Name="chkPerson" VerticalAlignment="Center" IsChecked="false" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>

                        </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="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 2", Age=29, Country="India", Gender="Male", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 3", Age=20, Country="India", Gender="Male", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 4", Age=22, Country="India", Gender="Male", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 5", Age=23, Country="India", Gender="Female", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 6", Age=23, Country="India", Gender="Male", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 7", Age=25, Country="India", Gender="Female", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 8", Age=25, Country="India", Gender="Female", EmailId="[e-mail]", JoinedOn=DateTime.Now},
                new Person{ Name="Person 9", Age=24, Country="India", Gender="Male", EmailId="[e-mail]", 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;
}

We are ready for testing our application. Run the Application.

 

As you see from the above image we have multiselected. Now press Delete Selected button.

 

The selected rows are deleted. That's it. Hope this article helps.