Does anyone know how to select(check) all the check boxes in row of handsontable by checking the first check box of a particular row. I tried all the possible options to get it done but I,m not able to do it by any means.
Here is the code,
function getCarData() {
return [
{ available: true,available2: true,available3: true, comesInBlack: 'yes'},
{available: false,available2: true,available3: true,available3: true, comesInBlack: 'yes'},
{ available: true,available2: true,available3: true, comesInBlack: 'no'},
{available: false,available2: true,available3: true, comesInBlack: 'yes'},
{ available: false,available2: true,available3: true, comesInBlack: 'no'}
];
}
var example1 = document.getElementById('example1'),
hot1;
hot1 = new Handsontable(example1, {
data: getCarData(),
colHeaders: ['Available','Available2','Available3'],
columns: [
{
data: 'available',
type: 'checkbox'
},{
data: 'available2',
type: 'checkbox'
},{
data: 'available3',
type: 'checkbox'
}
]
});
Here is the jsfiddle link jsfiddle.net/mq5on8qf
What you could do is add an afterChange
event which checks for a change on the first column, and if so, sets the values of the columns on that row to the new value. Here is an implementation of such an event:
afterChange: function (changes, source) {
var change = changes[0]; // [row, prop, oldVal, newVal]
var row = change[0];
var data = this.getData(); // reference to data object
var newVal = change[3];
var col = change[1];
// conditional on first row
if (col === 'available') {
data[row].available2 = newVal;
data[row].available3 = newVal;
}
this.render(); // render after making changes to data
}
And here is your fiddle with it applied.