SOURCE

onload = function() {

  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    deferResizing: true,
    showAlternatingRows: false,
    headersVisibility: 'Column',
    selectionMode: 'Cell',
    itemsSource: getData(100),

    // create select all button on the column header
    formatItem: function(s, e) {
      if (e.panel == s.columnHeaders) {
        if (s.columns[e.col].binding == 'sel') {
          e.cell.innerHTML = '<input class="select-all" tabindex="-1" type="checkbox">';
          updateSelectAllBox(s);
        }
      } else if (e.panel == s.cells) {
        wijmo.setAttribute(
          e.cell.parentElement,
          'aria-selected',
          s.rows[e.row].dataItem.sel
        );
      }
    }
  });

  // initialize column widths
  theGrid.autoSizeColumns(null, null, null, 18);

  // select/de-select all items when user clicks the check box on the header
  theGrid.hostElement.addEventListener('click', function(e) {
    if (wijmo.hasClass(e.target, 'select-all') &&
      e.target instanceof HTMLInputElement) {
      theGrid.deferUpdate(function() {
        theGrid.collectionView.items.forEach(function(item) {
          item.sel = e.target.checked;
        })
      })
    }
  });

  // update the select all checkbox state
  function updateSelectAllBox(grid) {
    var cb = grid.hostElement.querySelector('.select-all');
    if (cb instanceof HTMLInputElement) {
      var items = grid.collectionView.items,
        last = null,
        indeterminate = false;
      for (var i = 0; i < items.length; i++) {
        if (last != null && items[i].sel != last) {
          indeterminate = true;
          break;
        }
        last = items[i].sel;
      }
      cb.checked = last;
      if (indeterminate) {
        cb.indeterminate = true;
      }
    }
  }

  // some random data
  function getData(cnt) {
    var data = [],
      today = new Date();
    for (var i = 0; i < cnt; i++) {
      data.push({
        sel: false,
        title: getOneOf(['Lunch Tomorrow', 'Meeting on Friday', 'Quarterly Review', 'Evaluation']),
        from: getOneOf(['joe@joe.com', 'mark@smith.com', 'todd@schick.com', 'sun@wong.com']),
        priority: getOneOf([1, 2, 3]),
        immediate: Math.random() > .75,
        date: wijmo.DateTime.addDays(today, i)
      });
    }
    return data;
  }

  function getOneOf(arr) {
    return arr[Math.floor(Math.random() * arr.length)]
  }
}

<div class="container">

  <h1>
    Checkbox-based selection
  </h1>
  <p>
    This grid implements a custom checkbox-based scheme
    for row selection.
    Click the checkbox in the top-left cell to
    select or deselect all rows.
  </p>
  <div id="theGrid"></div>
</div>

/* fixed grid height */
.wj-flexgrid {
  height: 350px;
}

/* some extra cell padding */
.wj-flexgrid .wj-cell {
  padding: 12px;
}

/* replace selection highlight with a dotted border */
.wj-flexgrid .wj-cells .wj-cell.wj-state-selected {
  background: inherit;
  color: inherit;
}
.wj-flexgrid.wj-state-focused .wj-cells .wj-cell.wj-state-selected {
  border: 2px solid #7099de;
  padding: 10px;
}

/* selected rows */
.wj-flexgrid:not(.wj-state-focused) .wj-cells .wj-row[aria-selected=true] .wj-cell,
.wj-flexgrid .wj-cells .wj-row[aria-selected=true] .wj-cell:not(.wj-state-selected) {
  background: rgba(0, 0, 200, .5);
  color: white;
}