[REACT] Gantt - custom column editor control not working

[jit@flowit.dk]

Hi.

We are refactoring our gantt app, and in the process I managed to break the implementation of our custom editor controls for the grid view, and I just can't figure out what I did wrong. Could you please take a look at the sample attached?

gantt-6.3.1-custom-column-editor.zip

(13.35 MiB) Downloaded 168 times

Gantt-custom-controls.png (154.28 KiB) Viewed 2921 times

I'm using the DemoEditor from the online demo: https://bryntum.com/products/gantt/examples/frameworks/react-vite/basic/dist/

Thank you

[tasnim]

It's not working because you're initializing the gantt with the PureJS Gantt class which doesn't support JSX!

Screenshot 2025-09-02 202338.png (78.35 KiB) Viewed 2913 times

JSX is only available for Wrappers such as <BryntumGantt />

So if you use Bryntum Gantt wrapper it should work just fine for you

Hope it helps!

[jit@flowit.dk]

** facepalm ** Well, that was embarrassing. Too much copy/pasting taking place which tends to disable the brain. Thanks @tasnim

[jit@flowit.dk]

We don't intend to use the React wrapper going forward. Do you have some documentation on how to incorporate custom controls using the pure JS Gantt component ?

[marcio]

Hey Jimmy,

You can do custom editors with the pure JS Gantt, so for a non-wrapper app, you must either:

• Implement your editor as a Bryntum Widget (or subclass) that implements the editor contract (getValue, setValue, isValid, focus) and supply that as the column.editor; or
• Create a regular Widget whose html contains a container div and mount your React component into that div yourself (ReactDOM.createRoot(...) on widget render and unmount on widget destroy). This gives you React inside the pure JS Gantt but you must handle lifecycle/value APIs yourself.

See the Column editor docs for the editor contract and examples: Column.editor and the Widget class for building custom widgets: Widget.

[jit@flowit.dk]

Thanks @marcio

I'm implementing it by extending the Widget class. I have uncovered some issues - could you take a look ?

1) Widget doesn't work when returning DomConfig - nothing is rendered.

2) Returning DOM works - but text remains invisible unless color is defined (inherits color:transparent)

3) Hot reload results in the following error - why not just ignore multiple calls to initClass() ?
     Error: Type "coreflowganttcontrol" already registered with _Widget2 factory

See attached sample project.

-- Thank you

[marcio]

Hi Jimmy,

I checked here and confirmed that you need to extend a Field instead of Widget class, as I mentioned earlier. Sorry for misleading you with that information. You can see that on this documentation.

Using

export class CoreFlowGanttControl extends Field { 

makes all render as expected, and I don't see the hot reload error as well.

[jit@flowit.dk]

Thanks @Marcio.

It didn't quite work. Extending Field instead of Widget caused a compiler error because isValid is not a function but a property, according to the TypeScript type defs. So I assigned it an initial value of true. Oh boy - had I only known this would cause me to lose two days of producitivity

Bryntum-2025-09-11-000.png (108.31 KiB) Viewed 2609 times

It turns out the actual type is not a property as seen in the TypeScript definition, but a getter, as we can see in the source code. And the value assignment above makes the edit control fail silently in our gantt app - it never showed up when double clicking the cell.

Bryntum-2025-09-11-001.png (1.06 MiB) Viewed 2609 times

Attempting to define isValid as a getter will break the build.

Bryntum-2025-09-11-002.png (90.72 KiB) Viewed 2609 times

I suppose we could suppress the error, which defeats the purpose of using TS.

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

If you agree that there is a bug in the type def, could you please address it ?

Also, you guys provided us with managedCellEditing to give us more control over our custom editing controls. Is that only supported with React controls, or will it also work with controls extending from Field ?

{
    text               : 'Start',
    type               : 'date',
    field              : 'start',
    width              : '11em',
    editor             : (ref : any) => <DateEditor ref={ref} />,
    managedCellEditing : false
}

https://bryntum.com/products/grid/docs/guide/Grid/integration/react/guide#custom-cell-editors-with-pickers
https://github.com/bryntum/support/issues/7267

EDIT: Initial tests indicates that managedCellEditing does not work for controls extending Field. I will try to create a runnable sample to prove this and file it as a potential bug report in another ticket/post.
EDIT 2: I got it working in the Basic sample project - you can ignore the questions about managedCellEditing for now.

Thanks

[marcio]

Hey Jimmy,

According to our docs - https://bryntum.com/products/gantt/docs/api/Core/widget/Field#property-isValid - it's expected to have the isValid as readOnly.

I'll check if it's a bug with our dev team and get back to you.

[jit@flowit.dk]

Thanks @marcio