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=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 2”, Age=29, Country=“India”, Gender=“Male”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 3”, Age=20, Country=“India”, Gender=“Male”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 4”, Age=22, Country=“India”, Gender=“Male”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 5”, Age=23, Country=“India”, Gender=“Female”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 6”, Age=23, Country=“India”, Gender=“Male”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 7”, Age=25, Country=“India”, Gender=“Female”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 8”, Age=25, Country=“India”, Gender=“Female”, EmailId=“some@some.com”, JoinedOn=DateTime.Now},


new
Person{ Name=“Person 9”, Age=24, Country=“India”, Gender=“Male”, EmailId=“some@some.com”, 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. J