Prevent Handsontable cells from being selected on column header click

Question

In a Handsontable, when a column header is clicked, all cells of that column are selected. Is the a way to prevent this from happening ?

I don't think there's such an option in the documentation. I didn't find where the events are registered on the DOM within the source code of the Handsontable library itself either.

Any hint would be appreciated. Thanks.

Answer 1

It is possible to stop the event from propagating using the beforeOnCellMouseDown hook, which prevents the cells of the header column that was clicked to be selected:

/**
 * @param {MouseEvent} event
 * @param {WalkontableCellCoords} coords
 * @param {Element} element
 */
var handleHotBeforeOnCellMouseDown = function(event, coords, element) {
  if (coords.row < 0) {
    event.stopImmediatePropagation();
  }
};

Handsontable.hooks.add('beforeOnCellMouseDown',
    handleHotBeforeOnCellMouseDown, handsontable);

A very special thanks to Gustavo for his help!

Answer 2

I don't think it's possible to prevent that behavior. I haven't found any clue neither in the documentation nor quickly inspecting the source code.

However, you could deselect the selected cells right after they have been selected. Binding a function to handle the cell click event would do the trick. You could do that either by registering the callback when instantiating your handsontable:

$('#my_handsontable').handsontable({
   ...
   afterOnCellMouseDown: function(event, coords){
       // 'coords.row < 0' because we only want to handle clicks on the header row
       if (coords.row < 0){
           $('#my_handsontable').handsontable('deselectCell');
       }
   },
   ...
});

Or by means of a hook:

Handsontable.hooks.add('afterOnCellMouseDown',  function(event, coords){
    if (coords.row < 0){
        $('#my_handsontable').handsontable('deselectCell');
    }
});

Alternatively, you could edit handsontable source code and comment the piece of code in walkontableConfig that does select the whole column when a header cell is clicked:

var walkontableConfig = {
   ...
   onCellMouseDown: function (event, coords, TD, wt) {
      ...
      // if (coords.row < 0) {
         // instance.selectCell(0, coords.col, instance.countRows() - 1, coords.col);
         // instance.selection.setSelectedHeaders(false, true);
      // }
      ...
   },
   ...
};

Answer 3

Yes, There is an trick or we can say option to prevent selecting cell on header click. "Just set selectionMode to single single."

Try below code:

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

var example1 = document.getElementById('example1');
var selectOption = document.getElementById('selectOption');
var settings1 = {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    width: 700,
    height: 272,
    colWidths: 75,
    rowHeights: 20,
    rowHeaders: true,
    colHeaders: true,
    selectionMode: 'single', // 'single', 'range' or 'multiple',
};
var hot1 = new Handsontable(example1, settings1);
});