Get Free Trial

How to add a checkbox to a column header with compact form layout

Resolved
Tiago asked on September 6, 2021

Hello,
 
Is it possible to use the checkbox with compact form layout?
 
I’m trying to add a checkbox to a column header with compact form layout, I kind of succeeded, but every time I click on the checkbox, the column expands or collapse and that’s not what I want, what I want it’s when the user clicks on the checkbox, the expand/collapse action doesn’t happen, only when the cell is clicked. Check the attach to see what i expect.
 
Best Regards,
Tiago

Attachments:
checkbox-compact.PNG

3 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 8, 2021

Hello, Tiago!
 
Thank you for reaching out to us.
 
To prevent expand with click event on the checkbox, we suggest adding an additional layer for clicks handling on input with checkbox.
Here is a JSFiddle example for reference: https://jsfiddle.net/flexmonster/bgfarqs4/.
 
Please let us know if the solution works fine for you.

Best regards,
Nadia

Public
Tiago September 9, 2021

Hello, Nadia!
 
The JSFiddle example works like a charm! Thanks!
 
How can i reach this result using angularJS?
 
Best regards,
Tiago

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 10, 2021

Hello, Tiago!
 
Thank you for your reply.
Here is a JSFiddle example which will help you reach the same result using angularJS: https://jsfiddle.net/flexmonster/dw10vap2/
You are welcome to write to us in case further questions arise.
 
Best regards,
Nadia

Please login or Register to Submit Answer