DataGrid for DevExtreme - How to implement a three-state "Select All" CheckBox in a group row

This example demonstrates how to implement a custom "Select All" CheckBox in a group row to select all rows in this group. This CheckBox can have three states: unchecked, checked, or undetermined (when only several of the group members are checked).

This solution is designed to work with in-memory data.

Implementation details

Implement a GroupSelectionHelper helper class. Use the customizeColumns function to specify the groupCellTemplate that creates a CheckBox for every group row.

The synchronizeCheckBoxes function in the helper class is called every time user makes a selection. In this example, this function helps to synchronize parent and nested group rows.

Files to Look At

• jQuery
  • DataGridGroupSelection.js
  • GroupSelectionHelper.js
• Angular
  • app.component.html
  • app.component.ts
  • GroupSelectionHelper.ts
• ASP.NET
  • Index.cshtml
  • GroupSelectionHelper.js

Documentation

• CheckBox - API Reference
• DataGrid - API Reference

More Examples

• DataGrid Multiple Record Selection API Demo