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

/* 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() {

	//Generates data for the FlexGrid
	var getData = function (value) {
		var countries = 'India,Japan,UK,US,China'.split(','), data = [];
		for (var i = 0; i < value; i++) {
			data.push({
      	sel: false,
				id: i + 1,
				country: countries[i % countries.length],
				sales: Math.random() * 10000,
				downloads: Math.random() * 200,
			});
		}
		return data;
	};
  
  // Groups the data based on country name
  var cvData = new wijmo.collections.CollectionView(getData(100));
	cvData.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));

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

    /*// 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;
        })
      })
    }
  });
  
  theGrid.formatItem.addHandler(function(s, e) {
  	// Manages the column of checkboxes and the header checkbox
  	if (e.panel == s.columnHeaders) {
    	if (s.columns[e.col].binding == 'sel') {
     ...