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(){
   //create random data
	var getData = function (value) {
            var countries = 'India,Japan,UK,US,China'.split(','),
           data = [];
            for (var i = 0; i < 20; 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;
	};
	var cvData=new wijmo.collections.CollectionView(getData(5));
	var grid= new wijmo.grid.FlexGrid("#theGrid",{
		itemsSource:cvData		
	});
	// add column for adding checkbox  to select rows
	grid.columns.push(new wijmo.grid.Column({align:'center',name:"select"}));
	// add checkbox  in FlexGrid column's cell
	grid.itemFormatter=function(panel,r,c,cell){
		if(panel.columns[c].name=='select' && (panel.cellType==1 || panel.cellType==2)){
		cell.innerHTML='<input type="checkbox" />';
		}
	}
	// select grid on checkbox click 
	grid.hostElement.addEventListener("click",function(e){
		var ht= grid.hitTest(e);
		var headerCb=grid.columnHeaders.getCellElement(0,ht.col).firstChild;
		if(grid.columns[ht.col].name=="select" && e.target.type=="checkbox" && ht.cellType==1){
		 grid.rows[ht.row].isSelected=e.target.checked;
		 var rowCount=grid.rows.length,
		 checked=getSelectedRows()>0,
		 indeterminate=(getSelectedRows()>0 && rowCount>getSelectedRows());		 
		 headerCb.checked=checked ||indeterminate;
		 headerCb.indeterminate=indeterminate;		 
		}
		if(grid.columns[ht.col].name=="select" && e.target.type=="checkbox" && ht.cellType==2){
			for(var i=0;i<grid.rows.length;i++){
				grid.rows[i].isSelected=e.target.checked;
				grid.cells.getCellElement(i,ht.col).firstChild.checked=e.target.checked;
			}
		}
	});
	//get selected rowCount
	function getSelectedRows(){
	var cnt=0;
		for(var...