How to add data in dhtlmx gantt data?

Gantt React Gantt
#1

I want to add data to Dhltmx Gantt. What I need is a button that opens a list of data for the user to select. When the user selects the data, a POST API call will send the data to the backend. Then, a refetch API will occur, followed by displaying the data in the Gantt chart. Can you please assist me with this?

@ramil @ArtyomBorisevich

#2

Hello,

You can add extra data to the Gantt, with parse method:
https://docs.dhtmlx.com/gantt/api__gantt_parse.html

One of the options is to create checkbox inputs of the received data, and submit a request with selected tasks in your custom form.
Please check the simple example of how it might be implemented:

https://snippet.dhtmlx.com/bsod0b5p

#3

Using the parse method will remove all styling and state from the components, necessitating a redefinition of everything. How should I handle this?
In addition to this it also resets the expanded state of the grid column.

#4

Hello,

One of the options is to save the required states of the elements. For example, when dealing with expanded and collapsed tasks, you can create an array to store the IDs of the open tasks prior to parsing the data. And during the parse open those tasks.
https://docs.dhtmlx.com/gantt/desktop__tree_column.html

Here is the snippet demonstrating how it works:
https://snippet.dhtmlx.com/wxiwr3b6

#5

I used usepolling to get data in 5 second from backend and this is not working so how I can do this?

#6

Hello,

You can use deepcopy_on_parse config to prevent of changing already loaded tasks:
https://docs.dhtmlx.com/gantt/api__gantt_deepcopy_on_parse_config.html

#7

this is not working. so can you please help me more with this?

The issue happening here is that we did a vertical scroll to the bottom of the page in Gantt. When the poll is activated, the page automatically goes to the top.
so can you please also help me?
@ArtyomBorisevich

#8

Hello,

Gantt has an initial_scroll config:
initial_scroll Gantt Docs ;

When config is enabled, Gantt scrolls the timeline to the first task. If you turn it off, the scroll position will be restored after the data has been loaded using the parse method:

Please check the following snippet:
DHTMLX Snippet Tool ;

#9 
useEffect(() => {
    gantt.render();
    gantt.refreshData();
    gantt.parse(props.ganttData);
}, [props.ganttData]);

I am using the useEffect hook to fetch poll data every 5 seconds, which has resolved my scrolling issue. However, I need help with maintaining the hide and unhide states. Currently, when I’m hidden and the data loads, the task view gets unhidden. Can you please assist me with this?

#10

Hello,

You don’t need to use render and refreshData methods before parse method, cause it involves the use of render when loading tasks in Gantt.

I tried to reproduce your issue in the simplified React demo:
react-gantt-demo.zip
and it seems to work correctly to me.
The issue may be related with some specific features, but it’s hard to suggest what exactly goes wrong without more details, so could you please send me a simplified demo with all necessary files and install/run instructions, that I will be able to run locally and reproduce the issue?

#11

Heyyy! U can add a button that triggers a modal with a data selection list. Upon selection, use a JavaScript function to POST the data to your backend and then call a refetch method to update and display the data in the Gantt chart.

Hope this helps!