Integrating Custom Angular Components as Inline Edit Components in Grid of Gantt Chart

Gantt
#1

Hi Team,

We were evaluating Gantt Chart Component in Angular.
Is there a way to Integrate Custom Angular Components as Inline Editing Components in Grid of Gantt Chart?

If it 's possible can you please share us the way to achieve it. That would be really helpful.

Thanks in Advance.
Bhavesh Kumar.

1 Like
#2

Hello Bhavesh,
Unfortunately, there is no way to render Angular elements inside Gantt. You can only show HTML elements.
The dev team will investigate if it is possible to add support of using Angular methods and elements, but I cannot give you any ETA.

#3

@ramil: Did we get a chance to check the feasibility of integrating Angular components in Gantt Chart?

#4

Hello Hitesh,
The dev team will add a way to let Angular and React render task rows in the grid.
I cannot promise that other parts of Gantt will have that functionality.

#5

Hello Ramil,

Thanks for the update.
Can you please let us know the ETA for it?

Thank you,
Bhavesh Kumar.

#6

Hello Bhavesh,
The 7.1 version is scheduled for October 2020, but it can delay to November:

Regarding the other functionality, unfortunately, I cannot give you any ETA.

#7

Hi, is there any update on this item. This would be extremely valuable for Angular devs.

#8

Hello Brian,
Starting from the 7.1 version, you can add Angular components inside the grid cells and as addTaskLayer elements:
https://docs.dhtmlx.com/gantt/whatsnew.html#71:~:text=The%20onrender%20callback%20for%20rendering,layer%20into%20DOM%20is%20added

However, Angular has the createComponent method that allows rendering components. This means, you can create a custom inline editor and manually render Angular components there:
https://docs.dhtmlx.com/gantt/desktop__inline_editing.html#custominlineeditor

The following demo can help you to start implementing your solution:
https://files.dhtmlx.com/30d/f9799659eaf1a59847b4682df1bbdab8/angular17+gantt+material-date_picker-inside_inline_editors.zip