Select all CheckBox in DataGrid and delete rows in Silverlight 3

In this article we will see how we can select all rows of DataGrid and delete all selected.


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.

1.gif
 
First we will design our application to have a DataGrid to display data and a Button to Delete Selected Rows.

2.gif
 
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" 
                   LoadingRow="dgPerson_LoadingRow" Grid.Row="1" AutoGenerateColumns="False">
            <data:DataGrid.Columns>
                <data:DataGridTemplateColumn Width="80" HeaderStyle="{StaticResource DataGridColumnHeaderStyle}">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox x:Name="chkPerson" Click="chkPerson_Click"
                                      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"/>