Adding checkbox in header to select all the records

Tags: #<Tag:0x00007efc6ad89b78>

I have added a checkbox in the header to select all the records present in the grid.
While clicking the header checkbox all the records are getting selected but the header checkbox is still in unchecked state. So I am unable to deselect all the records.

Please see the below example:-

https://stackblitz.com/edit/angular-ivy-3qyxf6

Hi @shinoyjose009

here’s an example with a working checkbox inside a column header https://jsfiddle.net/AMBudnik/s1aojf0u/

hi @aleksandra_budnik,

Can you provide the example in angular. Also I am using OnCellMouseDown as a separate function rather inside the settings itself. As you can see in the example that I shared above.

Hi @shinoyjose009

Your example didn’t work because you don’t react on click in your custom header txt = '<input type=\'checkbox\' class=\'checker\' >';.

So I slightly changed demo and it works as expected - https://stackblitz.com/edit/angular-ivy-syddiv?file=src/app/app.component.ts

Unfortunately, I have to use an outer variable - isChecked. If I would want to use a property from class, it will be inaccessible from the custom header, because of this inside in referring to header itself, not the class.

Thanks @piotr.nowak for quick reply.
Its working now.