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.

Ladon

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!

Ladon

stopPropogation may be a better choice in some cases (see #5300240) – Sacrilege

This doesn't work for me in 0.18. The event triggers alright, but calling stopImmediatePropagation() doesn't prevent cell selections – Cacuminal

Same issue as @Cacuminal – Monteria

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);
      // }
      ...
   },
   ...
};

Kuhlman

Mmm, I'll have to try this but I guess that won't work for me as I'm already hooking on "cell selection". It even does asynchronous things, so doing "unselection" right after may have bad behaviour. I'll certainly give it a try and report back. Thanks a lot for replying. – Astrea

Alternatively, you could edit handsontable source to remove that behavior. See my edit answer above. Personally, I don't like editing third party libraries as that adds extra complexity when upgrading those libraries, but in some cases that could be the only solution. – Kuhlman

Yeah, I don't like doing this either but hey, that could be a nice contribution if I ever go that far: make this optional. Thanks for the tips. – Astrea

Oh, I think I found an alternative solution. I could hook on beforeOnCellMouseDown and do your suggested solution in there instead and stop the event from propagating. I'll try this right away. – Astrea

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);
});

Chignon