Wijmo 5 | Select Multiple Rows using checkbox

Select rows without using boolean property from itemsSource

by Joel Parks

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<div id= "theGrid"></div>
<button id="getCheckedRows">
Get SelectedRows
</button>
<div id="rows">
SelectedRows: 
</div>

CSS

#theGrid{
	max-height:500px;
}

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({
				id: i + 1,
				country: countries[i % countries.length],
				sales: Math.random() * 10000,
				downloads: Math.random() * 200,
				active: i%3 == 0
			});
		}
		return data;
	};
	
	// Pushes data to collectionView, adds GroupDescription, and pushes the collectionView onto the FlexGrid
	var cvData = new wijmo.collections.CollectionView(getData(20));
	cvData.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));
	var grid = new wijmo.grid.FlexGrid("#theGrid",{
		itemsSource:cvData		
	});
		
	// Adds checkboxes to the RowHeader column
	grid.itemFormatter=function(panel,r,c,cell){
		if(panel.cellType == 3 || panel.cellType == 4){
			cell.innerHTML = '<input type="checkbox" />';
		}
	}
	
	// Selecting the row when a checkbox is clicked
	grid.hostElement.addEventListener("click",function(e){
		var ht= grid.hitTest(e);
		var headerCb = grid.topLeftCells.getCellElement(0,ht.col).firstChild;
		
		if(e.target.type == "checkbox") {
			if(ht.cellType == 3 && grid.rows[ht.row].dataItem.groupDescription == undefined) {
				// console.log(grid.rows[ht.row].dataItem.groupDescription);
				grid.rows[ht.row].isSelected = e.target.checked;
				var rowCount = grid.rows.length;
				var checked = getSelectedRows() > 0;
				var indeterminate = (getSelectedRows() > 0 && rowCount > getSelectedRows());
				headerCb.checked = checked || indeterminate;
				headerCb.indeterminate = indeterminate;
			}
			else if(ht.cellType == 3 && grid.rows[ht.row].dataItem.groupDescription != undefined) {
				var groupedRow = ht.row;
				var lastRow = ht.row + grid.rows[ht.row].dataItem.items.length;
				for(var j = groupedRow + 1; j <= lastRow; j++) {
					grid.rows[j].isSelected = e.target.checked;
					console.log(grid.rowHeaders.getCellElement(j,...