We are using the AnyChart library, specifically the AnyGantt module (version: 8.12.1.1937 (2024-04-10)). I am attempting to add custom controls inside the DataGrid portion of the chart. I am able to add custom columns and include custom html controls in those grid cells. However, the chart’s built-in event handlers are preventing all attempts to click on the controls. For example, when I attempt to click on a control (i.e. a textbox) in a cell, the chart’s rowClick event is firing and not allowing the click to reach the control. I can tab into the control, but I can’t click on it.

I’m creating the column like so:

let colJunk = dataGrid.column(4);
colJunk.width(120);
colJunk.title().useHtml(true).text('<span style="font-weight: 600; font-size: 11px">MCP</span>');

I add the control in the column like so:

colJunk.labels().useHtml(true);
colJunk.labels().format('<input type="text" value="{%someData}"/>');

The data renders properly. Inspecting the DOM, I can see that the controls are being rendered properly:

<input type="text" value="End of Line">

However, when I click on the text box, nothing happens. It won’t select the text box and allow me to type. I assume the overall control’s event handling framework is not allowing the control to receive the click.

Interestingly, if I press the tab key, it will highlight the nearest textbox control and I can enter text. I just can’t mouse-click into the control.

This needs to work for all types of controls: textboxes, drop-downs, check boxes, etc.

I’ve tried enabling and disabling chart editing:

chart.edit(false);

I’ve also tried preventing default on the row click handler:

chart.listen("rowClick", function (e) { e.preventDefault() });

No luck.

In the docs, I see a suite of row events, connector events, and data tree events, but I don’t see any events relating to data grid cells.

Thoughts?