Wijmo 5 | Select Multiple Rows using checkbox

Select rows without using boolean property from itemsSource

by Manish Gupta

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;
}
.select{
	background-color:#80adbf !important ;
	color:#fff;
}

JavaScript

onload=function(){
   //create random data
	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;
	};
	var cvData=new wijmo.collections.CollectionView(getData(50));
	var grid= new wijmo.grid.FlexGrid("#theGrid",{
		itemsSource:cvData	,
		
	});
		
	// add checkbox  in FlexGrid 
	grid.itemFormatter=function(panel,r,c,cell){
		if(panel.cellType==4 || panel.cellType==3){
		cell.innerHTML='<input type="checkbox" />';
		}
		
	}
	var isDefaultSelection=false;
	grid.selectionChanging.addHandler(function(s,e){
		if(isDefaultSelection){
			isDefaultSelection=false;
			e.cancel=true;
		}
	})
	grid.hostElement.addEventListener("mousedown",function(e){
	var ht= grid.hitTest(e);
	if(e.target.type!=="checkbox" && (ht.cellType==3 || ht.cellType==4 )){
			isDefaultSelection=true;
		}
	},true);
	// select grid on checkbox click 
	grid.hostElement.addEventListener("click",function(e){
		var ht= grid.hitTest(e);
		var headerCb=grid.topLeftCells.getCellElement(0,0).firstChild;
		if(e.target.type=="checkbox" && ht.cellType==3){	
		 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(e.target.type=="checkbox" && ht.cellType==4){
			for(var i=0;i<grid.rows.length;i++){			  
				grid.rows[i].isSelected=e.target.checked;						}
			updateCheckBox(grid);
		}
	},true);
	grid.updatedView.addHandler(function(s,e){
		updateCheckBox(s);
	});
	function...