Wijmo 5 | Select Multiple Rows using checkbox
Select rows without using boolean property from itemsSource
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 = [];
return data;
};
var cvData=new wijmo.collections.CollectionView(getData(5));
var grid= new wijmo.grid.FlexGrid("#theGrid",{
itemsSource:cvData
});
// add checkbox in FlexGrid
grid.itemFormatter=function(panel,r,c,cell){
if(panel.cellType==3 || panel.cellType==4){
cell.innerHTML='<input type="checkbox" />';
}
}
// select grid on checkbox click
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" && 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; grid.rowHeaders.getCellElement(i,ht.col).firstChild.checked=e.target.checked;
}
}
});
//get selected rowCount
function getSelectedRows(){
var cnt=0;
for(var i=0;i<grid.rows.length;i++){
if(grid.rows[i].isSelected){
cnt++;
}
}
return cnt;
}
// get selected rows in the FlexGrid
document.getElementById("getCheckedRows").onclick=getCheckedRows;
function getCheckedRows(){
var rowDiv=document.getElementById("rows");
rowDiv.innetText+='[';
for(var i=0;i<grid.rows.length;i++){
if(grid.rows[i].isSelected){
rowDiv.innerText+=" "+i;
}
}
rowDiv.innetText+=']';
}
}