Categories
Share on twitter
Share on facebook
Share on linkedin
Introducing CheckBox Selector Column in WPF UWP DataGrid

New CheckBox Selector Column in the WPF and UWP DataGrid

We are pleased to introduce checkbox selection support in our 2019 Volume 3 release for both the WPF and UWP DataGrid. This feature will help you select or deselect rows by interacting with checkboxes in a column.

In this blog, we are going to see how to use a checkbox selector column in a data grid.

Adding checkbox selector column

You can add a checkbox selector column to the DataGrid like any other column, and place this selector column anywhere in columns collection. You can use this selector column unbound, i.e. there is no need to have the property definition in the underlying ItemsSource.

<syncfusion:SfDataGrid x:Name="dataGrid" 
                       AutoGenerateColumns="False" 
                       SelectionMode="Multiple"
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
         <syncfusion:GridCheckBoxSelectorColumn MappingName="SelectorColumn" 
                                                Width="30"/>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

Select all the rows by interacting with the checkbox in the column header.

Rows selected with check boxes in the column header of DataGrid
Rows selected with checkboxes in the column header of DataGrid

Getting checked items

You can get the checked items through the DataGrid.SelectedItems property as selection and checkboxes are synchronized together.

Styling

In the WPF platform, you can customize the style of the checkboxes in record cells through the CellStyle property and the checkbox in the header through the HeaderStyle property.

The following example shows how to customize the checkboxes in record cells.

<syncfusion:SfDataGrid x:Name="dataGrid" 
    AutoGenerateColumns="False" 
    ItemsSource="{Binding Orders}">
        <syncfusion:SfDataGrid.Columns>
            <syncfusion:GridCheckBoxSelectorColumn MappingName="SelectorColumn" 
                Width="30">
                <syncfusion:GridCheckBoxSelectorColumn.CellStyle>
                    <Style TargetType="syncfusion:GridCell">
                        <Style.Resources>
                            <Style TargetType="CheckBox">
                                <Setter Property="BorderBrush" Value="Red"/>
                            </Style>
                        </Style.Resources>
                    </Style>
                </syncfusion:GridCheckBoxSelectorColumn.CellStyle>
            </syncfusion:GridCheckBoxSelectorColumn>
        </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
Customized check boxes in WPF DataGrid
Customized checkboxes in WPF DataGrid

In the UWP platform, you can customize the checkbox feature by customizing its ControlTemplate.

<syncfusion:SfDataGrid x:Name="dataGrid"                                                                      
---------------------- 
     <Syncfusion:SfDataGrid.Resources>
          <Style TargetType="CheckBox">
               .................................
               .................................
               .................................
              <Setter Property="Template">
                    <Setter.Value>
                         <ControlTemplate TargetType="CheckBox">
                              <Grid Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                                   BorderThickness="{TemplateBinding BorderThickness}">
                                   <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CombinedStates">
                                             <VisualState x:Name="UncheckedNormal" >
                                                  <Storyboard>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                                                                      Storyboard.TargetProperty="Stroke">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                  </Storyboard>
                                             </VisualState>
                                             <VisualState x:Name="CheckedNormal">
                                                  <Storyboard>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                                                                      Storyboard.TargetProperty="Fill">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                                                                      Storyboard.TargetProperty="Stroke">
                                                             <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                                                                      Storyboard.TargetProperty="Foreground">
                                                             <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                                                        Storyboard.TargetProperty="Opacity"
                                                                        To="1" Duration="0" />
                                                  </Storyboard>
                                             </VisualState>
                                             <VisualState x:Name="IndeterminateNormal">
                                                  <Storyboard>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                                                                      Storyboard.TargetProperty="Stroke">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
                                                                                      Storyboard.TargetProperty="Fill">
                                                             <DiscreteObjectKeyFrame KeyTime="0" 
                                                                     Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                                                                      Storyboard.TargetProperty="Foreground">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
                                                                                      Storyboard.TargetProperty="Glyph">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="" />
                                                       </ObjectAnimationUsingKeyFrames>
                                                       <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
                                                                        Storyboard.TargetProperty="Opacity"
                                                                        To="1" Duration="0" />
                                                  </Storyboard>
                                             </VisualState>
                                             .................................
                                             .................................
                                             .................................
                                       </VisualStateGroup>
                                  </VisualStateManager.VisualStateGroups>
                                  .................................
                                  .................................
                                  .................................
                             </Grid>
                        </ControlTemplate>
                   </Setter.Value>
              </Setter>
          </Style>
     </Syncfusion:SfDataGrid.Resources>
</syncfusion:SfDataGrid>
Customized check boxes in UWP DataGrid
Customized checkboxes in UWP DataGrid

Conclusion

I hope you now have a clear idea of these features and how to get started with checkbox selection in the DataGrid for WPF and UWP.

To learn more, check our UG documentation for both WPF and UWP platforms. You can download our 2019 Volume 3 release setup to check out these controls.

Check out the samples at these GitHub repositories to try these features.

WPF: https://github.com/syncfusion/wpf-demos/tree/master/DataGrid

UWP: https://github.com/syncfusion/uwp-demos/tree/master/SfDataGrid

If you have any questions about these controls, please let us know in the comments below. You can also contact us through our support forumDirect-Trac, or Feedback Portal. We are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top