CheckBox Selector Column in WPF and UWP DataGrid | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (199)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (892)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (497)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (379)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (319)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
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:

Comments (2)

Fanourios Siskakis
Fanourios Siskakis

Good thing you tested this feature extensively before publishing it…

Neither the Checkbox binding works, nor the SelectedItems binding…

Neelakandan Kannan
Neelakandan Kannan

Hi Fanourios Siskasis,

It seems you are trying to bind a model property to the checkbox-selector column. However, the GridCheckBoxSelectorColumn is an unbound column that is not bound to any properties from the underlying data source, and it allows users to select or deselect rows through CheckBox as well as binding selection through the selection API that is available.

Also, regarding SelectedItems binding, we couldn’t reproduce the issue and selection is working properly as per binding. You can refer to the below published KB for your requirements if you are missing something.

https://www.syncfusion.com/kb/3070/how-to-bind-the-selecteditems-property-of-sfdatagrid-to-viewmodel-property

Please have a look on this and revert us with details if you need further assistance for this.

Regards,
Neelakandan

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed