11

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.

Alexandre Dubé
  • 2,769
  • 1
  • 18
  • 30

3 Answers3

10

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!

Alexandre Dubé
  • 2,769
  • 1
  • 18
  • 30
  • `stopPropogation` may be a better choice in some cases (see http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation) – Sean the Bean Aug 27 '15 at 16:38
  • 3
    This doesn't work for me in 0.18. The event triggers alright, but calling stopImmediatePropagation() doesn't prevent cell selections – Eric Jan 04 '16 at 22:49
  • Same issue as @Eric – Petah Feb 06 '17 at 22:39
4

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);
      // }
      ...
   },
   ...
};
Gustavo Zago Basilio
  • 191
  • 8
  • 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. – Alexandre Dubé Aug 26 '15 at 12:06
  • 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. – Gustavo Zago Basilio Aug 26 '15 at 13:42
  • 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. – Alexandre Dubé Aug 26 '15 at 14:40
  • 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. – Alexandre Dubé Aug 26 '15 at 14:47
2

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);
});
Sagar
  • 4,473
  • 3
  • 32
  • 37