# Checkbox-Based Selection in FlexGrid

Learn how to use checkbox selection with Wijmo's JavaScript DataGrid in this documentation topic

## Content


Through the use of the __wijmo.grid.selector__ module, we can allow Checkbox-based selection, both at the single-row level and the grouped data level, within the FlexGrid. We have two different classes within the module that we can use to implement Checkbox-based selection: __Selector__ and __BooleanChecker__.

__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 sate for all items in the group. An additional checkbox is added to the column header to toggle the selection for all of 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.

Creating __Selectors__ and __BooleanCheckers__:
````javascript
import { Selector, BooleanChecker } from '@mescius/wijmo.grid.selector';
import { FlexGrid } from '@mescius/wijmo.grid';
import { CollectionView, DataType, Aggregate } from '@mescius/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);
        }
    });
}
````

![Wijmo FlexGrid Checkbox Selection](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/grid/checkbox-based-selection.png)

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. If you pass it a specific column, it uses that column instead. The __BooleanChecker__ takes a parameter that specifies a column bound to a Boolean field.