Prevent user-selected cells from clicking on a column heading

Question

In Handsontable, clicking on a column heading selects all cells in that column. A way to prevent this?

I do not think there is such an option in the documentation. I did not find where the events are registered in the DOM in the source code of the Handsontable library itself.

Any hint would be appreciated. Thanks.

Answer 1

You can stop the event from propagating using the beforeOnCellMouseDown hook, which prevents the cells in the header column that was selected from being 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); 

Very grateful to Gustavo for the help!

Answer 2

I do not think it is possible to prevent this behavior. I did not find the slightest clue either in the documentation or in a quick check of the source code.

However, you can deselect the selected cells immediately after selecting them. Binding a function to handle a cell click event would do the trick. You could do this either by registering a callback when creating your hand:

 $('#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 with a hook:

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

Alternatively, you can edit the convenient text and comment on the walkontableConfig code snippet , which makes the entire column selectable when you click on the header cell:

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