How to use checkbox to checkall or uncheck all boxes into handsontable

Admin 1
Viewed 958

i want to use a checkbox to checkall or uncheck all boxes into available col. I create a checkbox with a function doalert to control the checked action. I was using setDataAtCell to edit check cell but it dosen't work.

My code is :

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
    ];
  }
  
  var example1 = document.getElementById('example1'),
    hot1;
  
  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
  var rows = hot1.countRows();
  for(var i = 0; i < rows; i++){
   hot1.setDataAtCell(i, 2, true)
  }
 }
  else {
      var rows = hot1.countRows();
  for(var i = 0; i < rows; i++){
   hot1.setDataAtCell(i, 2, false)
  }
}
}
});
</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>
button {
  padding: 10px;
  margin: 10px 0;
}
<div id="example1" class="hot handsontable htColumnHeaders"></div>
   CheckAll/UncheckAll<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>

Please help.

handsontable css html jquery javascript
2 Answers

You can do:

const example1 = document.getElementById('example1');
const hot1 = new Handsontable(example1, {
  data: getCarData(),
  colHeaders: ['Car model', 'Year of manufacture', 'Available'],
  columns: [{data: 'car'},{data: 'year',type: 'numeric'},{data: 'available',type: 'checkbox'}]
});

function getCarData() {
  return [{car: 'Mercedes A 160',year: 2012,available: true,comesInBlack: 'yes'},{car: 'Citroen C4 Coupe',year: 2013,available: false,comesInBlack: 'yes'},{car: 'Audi A4 Avant',year: 2014,available: true,comesInBlack: 'no'},{car: 'Opel Astra',year: 2015,available: false,comesInBlack: 'yes'},{car: 'BMW 320i Coupe',year: 2016,available: false,comesInBlack: 'no'}];
}

function doalert(checkboxElem) {
  example1
    .querySelectorAll('input[type=checkbox]')
    .forEach(elem => elem.checked = checkboxElem.checked);
}
</style><!-- Ugly Hack due to jsFiddle issue --><script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>button {
  padding: 10px;
  margin: 10px 0;
}
<div id="example1" class="hot handsontable htColumnHeaders"></div>

<label for="g01-01">CheckAll/UncheckAll</label>
<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this)" />

user_19325520

I use your different way to get trigger change function.

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
    ];
  }
  
  var example1 = document.getElementById('example1'),

  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });

$('input[name=checkfield]').click(function(){
//function doalert(checkboxElem) {
  if ($(this).is(':checked')) {
      var rows = hot1.countRows();
      for(var i = 0; i < rows; i++){
       hot1.setDataAtCell(i, 2, true)
      }
 }
  else {
        var rows = hot1.countRows();
         for(var i = 0; i < rows; i++){
         hot1.setDataAtCell(i, 2, false)
       }
  }

})

 
});
</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>
button {
  padding: 10px;
  margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>
   CheckAll/UncheckAll<input type="checkbox" name="checkfield" id="g01-01"/>

user_28204090
Related