Hi,
I want to add a checkbox in HEADER(first column). The checkbox is used to select all rows in handsontable.
I am able to select all rows if I add checkbox outside the handsontable, But I need it Header and clicking on checkbox should select or deselect all rows in the table.
I had seen example available in doc under custom renderer but I am unable to make to work in angular 6
I propose to use this method of a value change http://jsfiddle.net/8b35uhf4/ (currently the fastest one). To use it in your project just add the id of toggleAll for the checkbox in your header.
Hi…
I want CheckBox in my Header. I am unable to replicate above mentioned logic in angular https://docs.handsontable.com/5.0.2/demo-custom-renderers.html#page-header
In above example clicking in header checkbox will change its col colors to yellow … I need similar functionality BUT in ANGULAR …
How to add event Handler for Handontable in Angular ?
It is a bit more complicated in Angular. I can ask a developer to rewrite it for you but this is a commercial offer. If you would like me to schedule it for you please let me know.
Hi, Thank you for Help.
In Angular if I try to implement “Handsontable.dom.addEvent(selector,event,callback function)” then in callback function I cant pass event as parameter.
In Handsontable type definition file(handsontable.d.ts), addEvent method doesn’t accept any parameter in Dom interface,
But In Handsontable.full.js file addEvent method can accept “event” parameter in callback function
Hi,
Thank you for the demo, I got it working with small work around for now, Please check below demo for more info.
Also I found one BUG, OPEN browser console for above example NOT stackblitz embedded console
then click on the checkbox in Header. We get an error as “Uncaught TypeError: Cannot create property ‘NaN’ on number ‘NaN’”
After debugging I found that, In above function which is in handontable.js file
When we click on the checkbox in Header then this function is used to set value
“DataMap.prototype.set = function(row, prop, value, source) {”
but ‘row’ and ‘prop’ parameters of this function gets ‘NaN’ value instead of row as -1 and prop as “select” (for this case)
let dataRow = this.dataSource[row];
// TODO: To remove, use ‘modifyData’ hook instead (see below)
let modifiedRowData = this.instance.runHooks(‘modifyRowData’, row);