Add a Checkbox to a Column Header in React

Background:

Wijmo's FlexGrid converts columns of the boolean data type to checkboxes inside of each cell. You can create a 'master' checkbox, which resides inside the header cell of that column, that can be used to select or deselect all of the cells in that column.

Steps to Complete:

1. Create a column in FlexGrid that is a boolean data type

2. Prevent sorting of the column on click of the header

3. Add the checkbox to the column header

4. Apply the checkbox value of the master checkbox to all other checkboxes on click and vice versa

Getting Started:

Create a column in FlexGrid that is a boolean data type

In order for a master checkbox to work, the column that the master checkbox will be placed in must have checkboxes in its cells. This is done by making sure the column is a boolean data type. In this article, we'll make the Active column a boolean data type.

getData(count) {
    var data = [], countryId, productId;
    var _products = ['Widget', 'Gadget', 'Doohickey'];
    var _countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
    for(var i = 0; i < count; i++)
        countryId = Math.floor(Math.random() * _countries.length);
        productId = Math.floor(Math.random() * _prodicts.length);
        data.push({
            id: i,
            country: _countries[countryId],
            product: _products[productId],
            amount: Math.random() * 10000,
            active: i % 4 == 0,
        });
    }
    return data;
}

This method will return us a Wijmo ObservableArray, where the 'active' property of each object is set to a boolean value, replacing all of the values in the Active column with checkboxes.

Prevent sorting of the column on click of the header

Next, we'll use the itemFormatter event to cancel the click event of the boolean column header. ItemFormatter gets run when FlexGrid initializes, meaning that it will perform these actions before the customer gets a chance to view or interact with the grid.

itemFormatter(panel, r, c, cell) {
    if(panel.cellType == 2) {
        var flex = panel.grid,
        col = flex.columns[c];
        if(col.dataType == wjcCore.DataType.Boolean) {
            col.allowSorting = false;
        }
        // Determine checkbox display, add checkbox to header, apply checkbox value to cells
    }
}

This portion of code will check to see, as it iterates through creating each column, if the current column is a boolean column. If it is boolean, then it will turn off the ability to sort the column by clicking on the header. This needs to be done to allow for the user to interact with the master checkbox without altering the layout of the column.

Add the checkbox to the column header

Now that sorting has been prevented, and we're sure that we're in the right column, we can insert the master checkbox. The master checkbox will have 3 states; checked (all checkboxes are checked), unchecked (all checkboxes are unchecked) and partially checked (some checkboxes are checked).

var cnt = 0;
for(var i = 0; i < flex.rows.length; i++) {
    if(flex.getCellData(i,c) == true) {
        cnt++;
    }
}
cell.innerHTML = '<input type="checkbox">' + cell.innerHTML;
var cb = cell.firstChild;
cb.checked = cnt > 0;
cb.indeterminate = cnt > 0 && cnt < flex.rows.length;

This will add the master checkbox to the header of the boolean column, as well as set the value of the master checkbox based on the values of the checkboxes in that column.

Apply the checkbox value of the master checkbox to all other checkboxes on click and vice versa

Now that the master checkbox is in place, all that is left is to add an EventListener to it. When it gets clicked, it will iterate through and set all the chekboxes to the status of the master checkbox (either checked or unchecked).

cb.addEventListener('click', function(e) {
    flex.beginUpdate();
    for(var i = 0; i < flex.rows.length; i++) {
        flex.setCellData(i, c, cb.checked);
    }
    flex.endUpdate();
}

The flex.beginUpdate() method lets FlexGrid know that the data is going to be changed, so don't update the FlexGrid until endUpdate() method gets called. This means that the grid won't refresh every single time the checkbox gets updated, but that the grid will wait until all of the changes are done, and do one single update. This helps performance for FlexGrid.

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-flexgrid-checkbox-header