Search code examples
javascripthandsontable

How to select all checkbox in handsontable


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


Solution

  • 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.