DevExtreme DataGrid - Implement Three-State "Select All" Checkboxes within Group Rows

This example uses a groupCellTemplate to add custom "Select All" checkboxes to DataGrid group rows. These checkboxes can be in one of the following states: checked, unchecked, and indeterminate (when multiple rows are selected within a group). This example binds the DataGrid to a remote data source and enables remote operations.

To determine group row checkbox states and select/deselect rows, use the following properties:

• selectionFilter (if selection.deferred is enabled)
• selectedRowKeys (in other cases)

Files to Review

• jQuery
  • index.js
  • GroupSelectionBehavior.js
• ASP.NET Core
  • Index.cshtml
  • GroupSelectionBehavior.js
• Angular
  • GroupRowSelectionHelper.ts
  • group-row.component.html
  • group-row.component.ts
• React
  • App.tsx
  • GroupRowComponent.tsx
  • hooks.ts
• Vue
  • Home.vue
  • GroupRowComponent.vue
  • GroupRowSelectionHelper.ts

Documentation

• DevExtreme CheckBox API Reference
• DevExtreme DataGrid API Reference

More Examples

• DataGrid Multiple Record Selection API Demo

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)