16
Views
7
Comments
[Gantt Chart with DHTMLX] Reactive Webapp,Dynamic DHTMLX Gantt Chart
gantt-chart-with-dhtmlx
Reactive icon
Forge asset by Rajat Agrawal
Application Type
Reactive
Service Studio Version
11.55.11 (Build 64012)

Dear Team,

Good Day!.

I have a requirement where i want to create Dynamic DHTMLX Gantt chart,means should be able to display the data from DB in the chart,Save/Update the data back to DB on click of Save/Update,Delete the record from the DB on delete.

i am already referring the mentioned forge component ,but here data is not dynamic,it is displaying static/hardcoded data,and saving/updating/deleting the records only in UI but not from DB 

https://www.outsystems.com/forge/component-overview/20285/gantt-chart-with-dhtmlx-o11.

Kindly assist on this concern,Thanks in Advance.

Regards,

Bhagya


2026-01-28 16-57-48
Mihai Melencu
Champion

Hi Bhagya,

You can use a DataAction to fetch your data and transform it in JSON and pass that JSON to the gantt.

gantt.parse(Tasks);


2022-12-30 07-28-09
Navneet Garg

you need to pass json to your javascript create tables for your json first

Fetch data then serialize this in json




GanttChartwithDHTMLX.oml
UserImage.jpg
bhagya br

Hi Navneet/Mihai Melencu,thanks for the response,till here i could able to implement like fetch the data from DB ,pass JSON to the Javascript and display the gantt chart.

but i got stuck to perform CRUD operations,

Insert/Update data back to DB on click of Save button

Delete the record from DB onclick of Delete button

as of now its only Inserting/Updating/Deleting the record from UI but not from DB.

Please do the needful on this concern.

Thank You.





2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, you can prevent the default create/update events from the Gantt and replace those with your own.

You can find all the events here: Gantt API Docs


For example:


gantt.attachEvent("onBeforeTaskAdd", function(id, task){

    // Prevent default task creation

    return false; 

    // Your custom logic here

    $actions.YourAction()

});

2022-12-30 07-28-09
Navneet Garg

can you share your oml please? It is easy to understand your implementation and help me to provide appropriate solution.

2022-12-30 07-28-09
Navneet Garg

I am trying to give you solution based on dummy data may be it help you.

GanttChartwithDHTMLXLatest.oml
UserImage.jpg
bhagya br

Navneet thanks for your response and am using ur latest oml and its saving the data to DB,but upon edit/update its not saving into DB do i need to call separate function for update?

i tried to call savedata action itself upon update,and passign ID,if Id=0 then Nullidentifier(),else task Id,

but still it is not updating in DB,its not working for me

Delete operation,

I have added this logic to perform Delete operation,but this is also not working,do i need to modify anything in library file inside Script folder?please guide me ,it will be great if you can give me the oml with update and delete operation.

Thanks in advance

ganttchart.png
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.