Add Checkbox in Header in angular6

Getting help Questions
1

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

Info:
Angular 6
Handsontable CE (5.0.2)

Thank you

2

For more Information

3

Please Help
??

4

Hi @utkarshp64

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.

5

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 ?

6

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.

7

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

From handsontable.d.ts:
interface Dom {
HTML_CHARACTERS: RegExp,
addClass: (element: HTMLElement, className: string | any[]) => void;
addEvent: (element: HTMLElement, event: string, callback: () => void) => void;
…}

From handsontable.full.js

  this.eventManager.addEventListener(document, 'mousedown', function (event) {
    return _this3.onMouseDown(event);
  });

Why event is not avalable for angular but its availbale for vanilla js

8

I have asked my colleague to take a look at this example. I should get his feedback tomorrow.

9

Hi @utkarshp64

here is an example https://stackblitz.com/edit/angular-wdndjy?file=src/app/app.component.ts

we are using the afterOnCellMouseDown hook instead of dom events to check and handle the checkbox click

10

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)

/**

  • Saves single value to the data array.
  • @param {Number} row Visual row index.
  • @param {Number} prop
  • @param {String} value
  • @param {String} [source] Source of hook runner.
    */
    DataMap.prototype.set = function(row, prop, value, source) {
    row = this.instance.runHooks(‘modifyRow’, row, source || ‘datamapGet’);

let dataRow = this.dataSource[row];
// TODO: To remove, use ‘modifyData’ hook instead (see below)
let modifiedRowData = this.instance.runHooks(‘modifyRowData’, row);

dataRow = isNaN(modifiedRowData) ? modifiedRowData : dataRow;
.
.
.
.
} else {
dataRow[prop] = value;
}
};

Thank you.

11

Hi @aleksandra_budnik

Can you prepare a pull request?