The FlexGrid has a FlexGrid.selectionMode property that allows users to select multiple rows or row ranges using the mouse or the keyboard.

But in some cases you may prefer to provide this functionality by adding a column with checkboxes instead. This will allow users to select rows easily on mobile devices and may provide a more intuitive interface on desktop systems as well.

The Selector class allows you to do this by creating an instance of the Selector class and setting its column property to the column where you want the checkboxes to appear. For example:

// add a SelectorColumn to the first row header column
let selector = new SelectorColumn(theGrid, {
    itemChecked: () => showCheckedCount()
});

This will add checkboxes to cells in the first row header column. The checkboxes are bound to each row's Row.isSelected property, so toggling the checkbox toggles the row's selected state.

By default, the Selector also adds checkboxes to the top header cell and to cells in group rows. These cells can be used to select or de-select all rows on the grid and on each group.

You may use the showCheckAll property to turn off the checkbox at the top header cell.

The Selector can also be added to non header columns. For example:

// add a SelectorColumn to the first row data column
let selector = new SelectorColumn(theGrid.columns[0], {
    itemChecked: () => showCheckedCount()
});

In this case, the Selector will add the selection checkboxes to regular grid cells preserving their original data content.

Note: When you attach a Selector to a FlexGrid, it will automatically set the grid's FlexGrid.selectionMode property to SelectionMode.Cell, since that is the selection mode that makes most sense for the type of selection provided by the Selector.

The grid's FlexGrid.selectionMode should not be set when the FlexGrid is used with Selector. Specifically, the grid's FlexGrid.selectionMode should not be set to SelectionMode.ListBox as it would cause the grid to interfere with the selector's behavior.

The grid's FlexGrid.selectionMode can be set to any SelectionMode except the SelectionMode.ListBox without any issue if required.

The following code would cause the issue.

let selector = new SelectorColumn(theGrid.columns[0], {
    itemChecked: () => showCheckedCount()
});
// set the SelectionMode
theGrid.selectionMode = SelectionMode.ListBox;

In above code-snippet, setting the SelectionMode to ListBox after attaching the Selector to FlexGrid, would cause the interference.

As the ListBox selectionMode, uses the Row.isSelected and the Selector also uses the Row.isSelected. Hence, the grid's selectionMode to ListBox with Selector, would cause the incorrect selection of rows issue.