Select All CheckBox In DataGrid And Delete Rows In Silverlight 3
Introduction
In the previous article we have seen how to add a Checkbox Column In DataGrid and how to achieve multi select delete operation. In this article we will see how we can select all rows of DataGrid and delete all selected.
Creating Silverlight Project
Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as SelectAllRowsDataGrid.
First we will design our application to have a DataGrid to display data and a Button to Delete Selected Rows.
As you see we have customized the Columns in the DataGrid.
Now we will add a CheckBox Control in the Header of first column.
I tried many ways to put a CheckBox over there, but the effective way is to create a style and assign the style to HeaderStyle of that Column.
Here is the Style in XAML.
<UserControl.Resources> <Style x:Key=”DataGridColumnHeaderStyle” TargetType=”dataPrimitives:DataGridColumnHeader”> <Setter Property=”Foreground” Value=”#FF000000″/> <Setter Property=”HorizontalContentAlignment” Value=”Left”/> <Setter Property=”VerticalContentAlignment” Value=”Center”/> <Setter Property=”IsTabStop” Value=”False”/> <Setter Property=”SeparatorBrush” Value=”#FFC9CACA”/> <Setter Property=”Padding” Value=”4″/> <Setter Property=”Template”> <Setter.Value> <ControlTemplate TargetType=”dataPrimitives:DataGridColumnHeader”> <Grid x:Name=”Root”> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width=”Auto”/> </Grid.ColumnDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name=”CommonStates”> <VisualState x:Name=”Normal”/> <VisualState x:Name=”MouseOver”> <Storyboard> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundRectangle” Storyboard.TargetProperty=”(Fill).Color” To=”#FF448DCA”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[3].Color” To=”#7FFFFFFF”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[2].Color” To=”#CCFFFFFF”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[1].Color” To=”#F2FFFFFF”/> </Storyboard> </VisualState> <VisualState x:Name=”Pressed”> <Storyboard> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundRectangle” Storyboard.TargetProperty=”(Fill).Color” To=”#FF448DCA”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[0].Color” To=”#D8FFFFFF”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[1].Color” To=”#C6FFFFFF”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[2].Color” To=”#8CFFFFFF”/> <ColorAnimation Duration=”0″ Storyboard.TargetName=”BackgroundGradient” Storyboard.TargetProperty=”(Fill).(GradientStops)[3].Color” To=”#3FFFFFFF”/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name=”SortStates”> <VisualState x:Name=”Unsorted”/> <VisualState x:Name=”SortAscending”/> <VisualState x:Name=”SortDescending”/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name=”BackgroundRectangle” Fill=”#FF1F3B53″ Stretch=”Fill” Grid.ColumnSpan=”2″/> <Rectangle x:Name=”BackgroundGradient” Stretch=”Fill” Grid.ColumnSpan=”2″> <Rectangle.Fill> <LinearGradientBrush EndPoint=”.7,1″ StartPoint=”.7,0″> <GradientStop Color=”#FCFFFFFF” Offset=”0.015″/> <GradientStop Color=”#F7FFFFFF” Offset=”0.375″/> <GradientStop Color=”#E5FFFFFF” Offset=”0.6″/> <GradientStop Color=”#D1FFFFFF” Offset=”1″/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle x:Name=”VerticalSeparator” Fill=”{TemplateBinding SeparatorBrush}” VerticalAlignment=”Stretch” Width=”1″ Visibility=”{TemplateBinding SeparatorVisibility}” Grid.Column=”1″/> <CheckBox x:Name=”chkSelectAll” Click=”chk_Click” Margin=”2,0,0,0″ Content=”Select” d:LayoutOverrides=”Width, Height” VerticalAlignment=”Center” HorizontalAlignment=”Left”/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> |
Now assign the Style to your HeaderStyle of the Column.
<data:DataGrid x:Name=”dgPerson” Margin=”8″ Grid.Column=”1″ IsReadOnly=”True”
|
Now Run the Application to see the Header CheckBox.
Now we will create a class that will hold the Properties of sample data and create sample data to populate the DataGrid.
public {
} //List for Original List of Persons
{ InitializeComponent();
myList = new {
}; dgPerson.ItemsSource = myList; } |
We will add the event for LoadingRow for the DataGrid.
private {
chk.Click += new
chk.IsChecked = personList.Contains(p); } |
Now we will add the Click event handler to the Header CheckBox and the CheckBox in DataGrid Rows.
void chk_Click(object sender, RoutedEventArgs e) {
{
{ personList.Add(p); chk = dgPerson.Columns[0].GetCellContent(p) as
chk.IsChecked = true; } }
{
{ chk = dgPerson.Columns[0].GetCellContent(p) as
chk.IsChecked = false; } personList.Clear(); } }
{
{
personList.Add(p); }
{ personList.Remove(p); } } |
Now we will have the Delete Button Click handler.
private {
{ myList.Remove(item); } dgPerson.ItemsSource = myList; personList.Clear(); } |
Now we will run the application and test the application.
If we click on the Select CheckBox in the header of the First Column, all the rows would be selected.
Now if we don’t need everything to be selected but few, then we would uncheck the respective rows.
Now we would delete the selected rows.
The selected rows got deleted.
Hope this article helps.
After Delete Operation the CheckBox in Header is still checked. I am trying to make it uncheck after the delete operation. 🙂
Hi, got solution..?
HI
have u noticed the last the Screen Shot
did you find any solution for that checkbox to show as Unselected after the delete??? I have similar issue and havent find any answers for it.
Dennis
This is not working. Becaue once you scroll your window then only below chcek box get selected.
I have problem with this, I have 25rows in datagrid and 19 are visible to user,rest 6 not visible,Now if I click check All, its get selected only visible 19, and its allowing user to work other functionalities on 19 rows. rest 6 is not working. Your solution also giving same problem.
I had a problem when the application goes to the line:
CheckBox chk = (CheckBox)this.dgPerson.Columns[0].GetCellContent(e.Row);
the chk is always NULL.
Do you know which could be the cause?.
Thanks in advance