Demo - FlexGrid Checkbox-based selection

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<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>

CSS

/* 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;
}

JavaScript

onload = function() {

	var view = new wijmo.collections.CollectionView(getData(100));
  view.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));

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

    // 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) {
   ...