The better way to create extra react widget in task rows


Is there anyway that is more simple to add some extra react widget in task rows, now I used custom element to mount another react root for my react widget, but it’s too heavy, so many problems to handle, like events handling , styling, interact with gantt widget, the way to pass the data to or from a DOM node, all of these things are quite complicated and tedious, make the code hard to maintain, I guess there are some way to solve this painful procedure, don’t you?

So do you have any simple solution to tackle this problem?

And the sample you gave me last time, it’s not a good solution

There are many problems:

  1. I can’t render a react widget and let the react widget take care of all the renderings and interactions
  2. I can’t pass some complicated objects through node elements props, then I can not get the context to render specific doms
  3. Event handling is quite annoying, I still can not pass through the complicated objects to event handlers, and some times if you render a custom element that need the click event inside the task rows, it’ll conflict with the onTaskClick events and you have exclude this element inside the onTaskClick handling block, and pass through this click event to the real event handlers.

It’s quite painful, hope we could have a better solution to this, so we could have a better way to add extra element on gantt.

1 Like

Right now I could think up a solution is to using web component and interpreted as a react element, but still, it’s too painful to to trough those full chain operation just to render a simple icon with some styling tooltip or a dropdown menu.

Hello Kevin,
Unfortunately, it is not possible to use React elements in Gantt. You can return regular HTML elements, but if you use React elements, that wouldn’t work out of the box.

In the future, the dev team will investigate the possibility to use those React/Angular methods and elements, but I cannot give you any ETA.

1 Like

OK, sad…