How to async load data

Gantt
#1

how to async load data

#2

Hi @jinhua,
If you meant loading data from the server, you could use gantt.load() method. Also, you can combine it with promises and callback functions.
API: https://docs.dhtmlx.com/gantt/api__gantt_load.html
If you want to provide more wide client-server cooperation, you could check gantt.ajax module
API: https://docs.dhtmlx.com/gantt/api__gantt_ajax_other.html
If my answer didn’t help you, could you please clarify your question?

[REACT] [Gantt] Chiild component not re-render
#3

vue axios get async data

#4

Hi @jinhua,
Unfortunately, I don’t specialize in Vue, but I could suggest you check this API example:
https://www.npmjs.com/package/vue-axios#usage,
I think something like following would work:

Vue.axios.get(api).then((response) => {
 gantt.parse(response.data) 
})
#5

初始化数据的时候替换了我上次加载的数据，为什么？

#6

Hi @jinhua,
The common language of this forum is English, so could you use it please, instead of Chinese?
Google translated your question as:
“When I initialized the data, I replaced the data I loaded last time. Why?”
Unfortunately, I don’t fully understand what do you mean, as initialized the data,?
You can initialize gantt by calling gantt.init. And you can load data by colling .parse/.load methods. When you are loading the new data from your backend, they will mix with the old data:

  1. data with the same id-s will be replaced
  2. data which did not exist will be added
  3. data which did exist and has unique id will stay as it is
    I think it the right way it should work.

Your issue could occur if you are calling clearAll() before loading the new data.
Because clearAll() will remove all tasks and additional elements from the gantt chart, so the old data cease to exist and become fully replaced with new data.
It would be nice if you provide a more detailed description of your issue, maybe with some code fragments, to let me provide you more appropriate help?
API clearAll:
https://docs.dhtmlx.com/gantt/api__gantt_clearall.html

#7

Using the vue component, different pages render the same value, or the values are merged. Why? how to solve this problem? What I want to achieve is a different page that introduces the gantt component and renders different values.

#8

image

like that

#9

Hi @jinhua,
Thank you for this clarification. The issue could have occurred if you don’t call gantt.clearAll() before gantt.parse().
Also, if it didn’t help, you can think about creating a new gantt instance(available only in the PRO) for each call of the Vue component(with gantt): https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html#destructorofganttanddataprocessorinstances.
So, when you open the Vue component(with gantt) - create the new gantt instance and load data. When you leave this component - delete gantt instance.
If you still have the issue, could you please provide me with a complete sample project, which I could run locally and reproduce the issue?

#10

How do I scroll the grid and timeline horizontally in a gantt diagram at the same time

#11

Hi @jinhua,
In order to do this, you can use the scrollX parameter in the gantt.config.layout. Using this parameter you can bind many views to the one scrollbar, here is an example:
http://snippet.dhtmlx.com/70710ed50
Here is a more complex example, with the resource diagram(the important part is the gantt.config.layout):
http://snippet.dhtmlx.com/68f6733b2
API:
scrollbar:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#scrollbar
Gantt Layout:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html