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 cvData = new wijmo.collections.CollectionView(getData(20));
	cvData.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('title'));

  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
        );
      }
      /*if(e.panel == s.cells && e.col == 0 && s.rows[e.row] instanceof wijmo.grid.GroupRow) {
      	var chk = document.createElement('input');
        chk.type = 'checkbox';
        chk.style.marginLeft = '6px';
        chk.class = 'group-check-box';
        var groupData = e.panel.rows[e.row].dataItem;
        var cnt = 0;
        for(var i = 0; i < groupData.items.length; i++) {
        	if(groupData.items[i].active == true)
          	cnt++;
				}
				chk.checked = cnt > 0;
				chk.indeterminate = cnt > 0 && cnt < groupData.items.length;
				e.cell.appendChild(chk);
      }*/
    }
  });
  
  theGrid.formatItem.addHandler(function (s, e) {
  	if(e.panel == theGrid.cells && e.col == 0 && theGrid.rows[e.row] instanceof wijmo.grid.GroupRow) {
    	var chk = document.createElement('input');
      chk.type = 'checkbox';
      chk.class = 'grouped-check-box';
      chk.style.marginLeft = '6px';
      var groupData = e.panel.rows[e.row].dataItem;
      var cnt = 0;
      for(var i = 0; i < groupData.items.length; i++) {
      	if(groupData.items[i].active == true)
        	cnt++;
			}
			chk.checked = cnt >...