Checkbox at header

Tags: #<Tag:0x00007efc62535998>
#1

Hi all!!
I’m working in an Angular app with handsontable and I’m trying to programmatically uncheck a header checkbox I previously create via “colHeader” function inside handsontable settings but i am not succeeding.
It seems not work getting the input element and assigning it’s checked attribute to false. Example:
let salesCheckbox = document.querySelector(’.htCheckboxRendererInput-sales’)
let salesCheckboxInputEl = (arrDepCheckbox as HTMLInputElement)
salesCheckboxInputEl.checked = false
My handsontable version is 7.3.
Thanks!

#2

Hi @rafael.miranda

If you create column headers checkboxes by using afterGetColHeader method then they all will be unchecked at initial state.

https://jsfiddle.net/aszymanski/cjn0sdta/2/

Would that solve your issue?

#3

Hi Adrian! Thanks for your rapid answer.
Unfortunately this don’t solve my problem because what I need is unchecked programmatically a previously checked (via user click) header checkbox.
Is there any way to get it? Toggling to false the checked attribute via Html element doesn’t work.
Thanks so much for your time!

#4

Ok, I understand. Can you please show me how you make those checkboxes in the headers? From the code you send previously I can see that it’s a custom class.

If you can prepare a code demo in jsfiddle that would be great.

#5

Sure, I’ve done a very very minimized scenario where I show what I mean: although I set checked attribute to false, the rendered checkbox still true.
My real case is much more complex, and within an Angular project, but the problem is the same.
https://jsfiddle.net/gdp458jy/
Thanks in advance!

#6

Hi @rafael.miranda

Thank you for the demo, that was really helpful :slight_smile:

The problem was in targeting the selector, it had to be more specific, like here: https://jsfiddle.net/aszymanski/oc76h01z/2/

I know that it isn’t very handy, but you can get that from dev console by copying the JS path.

1 Like
#7

Wow, this long selector need was so unexpected to me, but that way I can toggle the header checkboxes programmatically.
Thank you so much!!

#8

I’m glad that I could help. I’m closing the topic now :slight_smile:

#9