Using Wrapper for angular, I am trying to implement a custom renderer where I have the following statement:
Handsontable.renderers.registerRenderer(‘checkBoxRenderer’, this.checkBoxRenderer);
But typescript in angular 5 complains with error:
Property ‘registerRenderer’ does not exist on type ‘Renderers’.
Although in my angular component definition I have ,
import * as Handsontable from ‘handsontable’;
Thanks
Hey @ntn62001
here’s a demo with a checkbox renderer inside an Angular app https://stackblitz.com/edit/angular-rgukn7?file=src/app/hello.component.ts
Yes thanks for that link, and looks like I am nearly there. One thing I saw is that, when I click on the checkbox in the header, it throws the following error trace:
TypeError: Cannot create property ‘NaN’ on number ‘NaN’
at DataMap.set (dataMap.js:626)
at applyChanges (core.js:1005)
at eval (core.js:1138)
at Object.resolve [as onQueueEmpty] (core.js:948)
at Object.checkIfQueueIsEmpty (core.js:869)
at Object.removeValidatorFormQueue (core.js:863)
at eval (core.js:929)
at done (core.js:1050)
at eval (core.js:1072)
at ColumnSettings.validator (hello.component.ts:46)
In the demo link it does not throw this error, but in my refactored example I have also added ‘checkbox’ type in that column with true/false values.
Thanks
checkbox in the header
This may change a lot. Can you share your implementation?
Ok thanks ,so following was the test code:
import { Component, Input } from ‘@angular/core’;
import * as Handsontable from ‘handsontable-pro’;
@Component({
selector: ‘hello’,
template: <h1>Hello {{name}}!</h1> <hot-table [licenseKey]="lickey" [settings]=settings></hot-table>,
styles: [h1 { font-family: Lato; }]
})
export class HelloComponent {
settings={
columns: [
{
data: 'car'
},
{
data: 'year',
type: 'numeric'
},
{
data: 'available',
type: 'checkbox'
}
],
colHeaders: true,
data: [
[‘BMW’, ‘A’,true],[5, 3,true],[7,4,true],[4,1,true],[7,4,true],[10,2,true]
],
afterGetColHeader: (core, col, TH) => {
if(col === 2){
TH.innerHTML = ’ A’;
}
},
afterOnCellMouseDown: (core, event, coords, TD)=> {
console.log(coords)
},
validator: function (value, callback) {
if (!value || String(value).length === 0) {
callback(false);
} else {
callback(true);
}
}
}
@Input() name: string;
}
You wrote about checkbox inside a header but there I can’t see any. I only see the
if(col === 2){
TH.innerHTML = ' A';
}
for afterGetColHeader.
Hi,
In the code below, we have Column C(I have renamed it to C now, and is the 3rd column) and has the checkbox in the header. When I click it, then it produces the error. Just please copy paste the code below, in the link
import { Component, Input } from ‘@angular/core’;
import * as Handsontable from ‘handsontable-pro’;
@Component({
selector: ‘hello’,
template: <h1>Hello {{name}}!</h1> <hot-table [licenseKey]="lickey" [settings]=settings></hot-table>,
styles: [h1 { font-family: Lato; }]
})
export class HelloComponent {
settings={
columns: [
{
data: 'car'
},
{
data: 'year',
type: 'numeric'
},
{
data: 'available',
type: 'checkbox'
}
],
colHeaders: true,
data: [
[‘BMW’, ‘A’,true],[5, 3,true],[7,4,true],[4,1,true],[7,4,true],[10,2,true]
],
afterGetColHeader: (core, col, TH) => {
if(col === 2){
TH.innerHTML = ’ C’;
}
},
afterOnCellMouseDown: (core, event, coords, TD)=> {
console.log(coords)
},
validator: function (value, callback) {
if (!value || String(value).length === 0) {
callback(false);
} else {
callback(true);
}
}
}
@Input() name: string;
}
Thanks
Sorry, still no checkbox inside a header.
Checked on Chrome 73/ Windows 10
Yes thanks for your quick updates.
Actually even mine is Chrome 73/windows 10
Not sure what is causing this.
Good day,
I updated to Version 73.0.3683.86 (Official Build) (64-bit) and still do not see the checkbox nor an error in the console.
With this code
afterGetColHeader: (core, col, TH) => {
if(col === 2){
TH.innerHTML = ' C';
}
},
it is impossible to show a checkbox as it only return a string C.
Hi ,
Ah now I get it. What is happening is that I run my code in Stackblitz and verify it there. And then I take the snapshot. But now when I copy paste the code in this editor, it is removing that input tag. please see the image below. The left panel shows my code pasted, and right panel shows the input tag removed.
But anyway let us move to the problem. I am still getting that error. Please assume the
input type=“checkbox” element.
IMAGE1(with checkbox)
IMAGE2(with checkbox checked and the error trace)
By the way, coincidently I found that there is this same issue reported in this forum. But I am not sure how it ended without crash. Please see the thread below:
Add Checkbox in Header in angular6
Thanks
Now we’re on the same page 
I have added the checkbox and got the same issue.
and you’re right, Add Checkbox in Header in angular6 this is the same issue. It ended up with no fix, just a workaround that hasn’t been reported by the user.
I will investigate this subject. We get an issue from handsontable.js file but this column configuration works in the vanilla version https://jsfiddle.net/AMBudnik/be2vg3ad/
It happens only when we set the last column to checkbox cell type (no matter if we use columns or cells method).
Ok Thanks!.
I’ve investigated the issue and it looks like it would be hard to find a workaround and surely not possible with official API.
I have reported the bug here https://github.com/handsontable/handsontable/issues/5934 and will update you aboout the changes.
Yes Thank you.
This issue was fixed in v.8.4.0.
