I'm trying to return DOMConfig from column renderer as a workaround for the autoHeight bug https://github.com/bryntum/support/issues/8246. I'm trying to add a click event handler to the element html string, but the function is not being called. Below is what I am doing:
const [columns] = useState([
{
field: 'custom',
text: 'Custom column',
width: 200,
renderer: (args) => {
// onclick or onClick? neither work
const html = `<div onclick="function handleClick() {
console.log('clicked');
}">${args.value}</div>`;
return { html };
}
}
]);
With the above, you can see in the DOM the div has onclick="...myFunctionCode" but the console.log() is never called. Is this not possible or am I not using DomConfig correctly? Here's a public repo that reproduces the issue: https://github.com/jamesonhill/-bryntum-issue
Is there any documentation on how to use EventHelper in react component wrapper? The code below throws an error when it runs, so I assume I'm doing something wrong.
useEffect(() => {
if (ganttRef.current && data) { // add data check otherwise this never runs since gantt not initialized on first render cycle
const instance = ganttRef.current.instance;
EventHelper.on({
element: instance,
delegate: 'div.name',
click: function(e: any) {
console.log('clicky click', e);
}
});
}
// when the above .on block runs, the below error is thrown
gantt.module.js:13323 Uncaught TypeError: element.addEventListener is not a function
at Function.addElementListener (gantt.module.js:13323:1)
at Function.on (gantt.module.js:13284:1)
at PlanTimelineViewGrid.tsx:199:1
at invokePassiveEffectCreate (react-dom.development.js:20253:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3551:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3595:1)
at invokeGuardedCallback (react-dom.development.js:3650:1)
at flushPassiveEffectsImpl (react-dom.development.js:20323:1)
at unstable_runWithPriority (scheduler.development.js:400:1)
at runWithPriority$1 (react-dom.development.js:9885:1)
}, [data]);
Please try putting a debugger there, the element might not be available at that moment.
You can also upload a runnable test case here, we can help you debug this issue!