KB - Wijmo 5 - Checkbox In Grouped Rows

This sample shows how to insert a checkbox into grouped rows.

by Joel Parks

HTML

<link rel="stylesheet" href="http://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>
<h1>Checkboxes in Grouped Headers</h1>

<div id="theGrid"></div>

CSS

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

  // create the FlexGrid (unbound)
  var flex = new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    headersVisibility: 1,
    columns: [{
        binding: 'active',
        header: 'Active',
        width: 75
      },
      {
        binding: 'country',
        header: 'Country',
        width: 200
      },
      {
        binding: 'downloads',
        header: 'Downloads'
      },
      {
        binding: 'sales',
        header: 'Sales'
      },
      {
        binding: 'expenses',
        header: 'Expenses'
      },
    ]
  });

  // give the grid some data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < 100; i++) {
    data.push({
      country: countries[i % countries.length],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
      active: false
    });
  }

  // create CollectionView with grouping
  var view = new wijmo.collections.CollectionView(data);
  view.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));
  flex.itemsSource = view;

  flex.formatItem.addHandler(function(s, e) {
    // Places checkboxes in the group headers
    if (e.panel == flex.cells && e.col == 0 && flex.rows[e.row] instanceof wijmo.grid.GroupRow) {
      // Sets up the default checkbox properties
      var chk = document.createElement('input');
      chk.type = 'checkbox';
      chk.class = 'custom-check-box';
      chk.style.marginLeft = '6px';
      var groupData = e.panel.rows[e.row].dataItem;
      var cnt = 0;
      // Changes the icon based on whether all, none, or some of the checkboxes are complete
      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);
      // Gets the...