Checkbox Selector Column for FlexGrid

March 31 2020

In 2017, one of our largest US customers asked us to add "selector" checkboxes to every grid row so their customers could select multiple rows by clicking them (they did not want to use the built-in ListBox selection mode). We made a sample for them.

In 2018, one of our largest customers in Europe made a similar request, but with a twist: they wanted checkboxes on group header rows as well, so users could select entire groups at once. We enhanced the original sample, sent them a copy, and they were happy.

In 2019, one of our largest customers in Japan asked for the same thing. We got the message. If three large corporations from all over the world want this, many of our customers probably want it as well. So we decided to upgrade the sample and make it an official Wijmo module: wijmo.grid.selector.

We decided to implement this feature as a separate module to keep the FlexGrid's footprint as small as possible.

The wijmo.grid.selector module contains two classes:

Selector: This class customizes a FlexGrid column by adding checkboxes to its cells. The checkboxes show and allow users to toggle the row's isSelected property. If there are any group header rows, their checkboxes show and toggle the selected state for all items in the group. An additional checkbox is added to the column header to toggle the selection for all the rows.

BooleanChecker: This class customizes regular data columns bound to Boolean fields by adding additional checkboxes to group rows and the column header. These checkboxes are used to toggle the value of the Boolean property for all items in any group or on the whole grid,

Create Selectors and BooleanCheckers:

import { Selector, BooleanChecker } from '@grapecity/wijmo.grid.selector';
 import { FlexGrid } from '@grapecity/wijmo.grid';
 import { CollectionView, DataType, Aggregate } from '@grapecity/wijmo';

 window.onload = function () {

     // create the grid
     let theGrid = new FlexGrid('#theGrid', {
         itemsSource: getData()
     });

     // create the Selector on the first row header column
     let selector = new Selector(theGrid); 

     // add BooleanCheckers to all bound Boolean columns
     theGrid.columns.forEach(col => {
         if (col.dataType == DataType.Boolean) {

             // set aggregate to show checkboxes on group header rows
             col.aggregate = Aggregate.First;

             // create the BooleanChecker on the column
             new BooleanChecker(col);
         }
 });

The Selector constructor takes a FlexGrid or a Column parameter. If you pass it a grid, the Selector attaches to the grid's first-row header column (a standard default). If you pass it a specific column, that column is used instead. The BooleanChecker takes a parameter that specifies a column bound to a Boolean field.

This is the result:

The checkboxes on the column headers allow users to select (or de-select) all rows. The ones on group header rows select whole groups, and the ones on regular data rows select individual rows.

The same logic applies to checkboxes on Boolean columns, except instead of selecting the items they change the values bound to the cells.

Notice how the selected cell belongs to a non-selected row. This is possible because the Selector sets the grid's selectionMode property to SelectionMode.Cell, which allows the user to move the selection with the mouse or keyboard without affecting the isSelected property of the rows. If you want to use a different selectionMode, you must set it after creating the Selector.

The Selector is usually applied to the first column on the grid, but that is not a requirement. It can be applied to regular data columns as well, which is especially useful if the grid doesn't have row header cells: