Custom Column Header click

Tags: #<Tag:0x00007efc648c0610>
#1

Hello,

I’m following the guide on how to create custom column header and it works.

However, there is an issue: if user clicks HTML element put inside column header then click propogates to column header itself (and that causes entire column selection). That is not desired effect.
Is it possible to stop propogation?

Note: issue is demonstrated with supplied demo at:
https://handsontable.com/docs/8.3.2/demo-custom-renderers.html

Thank you,
Igor.

#2

Hi Igor,

you can,

  1. Use disableVisualSelection: 'area' https://jsfiddle.net/handsoncode/hnw8yfzs/
    (line: 7)
    ref: https://handsontable.com/docs/8.3.2/Options.html#disableVisualSelection
  2. Use afterSelectionEnd hook to define if the coordinates of a selected row is -1 (header) and then if selected element meets the condition use instance.selectCell() - to select any other cell or instance.deselectCell() to remove selection entirely.
    ref: https://handsontable.com/docs/8.3.2/Hooks.html#event:afterSelectionEnd
  3. Use afterOnCellMouseDown hook to define if the event element is what ever element you need, (in the demo above it would be e.target.className === 'checker') and then if selected element meets the condition use instance.selectCell() - to select any other cell or instance.deselectCell() to remove selection entirely.
    ref: https://handsontable.com/docs/8.3.2/Hooks.html#event:afterOnCellMouseDown

If you need anything more feel free to ask. I’ll be happy to help with this task.

#3

Hi @igort

Have you chosen any of my proposed approaches?

#4