Which API to call for after all data is loaded

Gantt
#1

Hi,

Would like to know which API is more suitable to call when I want to wait after all the data is available but not yet displayed on screen/chart.

There are quite a few of them, and some looks very similar to me…

onBeforeDataRender
onBeforeGanttReady
onBeforeGanttRender
onBeforeTaskDisplay
onDataRender
onGanttLayoutReady
onGanttReady
onGanttRender
onParse

Currently, I am using gantt.parse() to load in the data, and after all the data has been loaded, I would like to perform some logic, before loading the data to the screen.

I am currently using onParse but not sure if that is the correct one to use. I’m quite confused between these few API. Example like onBeforeDataRender and onBeforeGanttRender, does the data here means for Grid? That means the data (on grid) and chart are loaded separately?

More explanation of them would be really appreciated. The one liners in the documentation doesn’t help much.

Thanks!

#2

Hello Joseph,

Would like to know which API is more suitable to call when I want to wait after all the data is available but not yet displayed on screen/chart.

Unfortunately, there is no way to stop the data from being rendered after Gantt loaded it.
If you want to modify some tasks when they are loaded but before Gantt renders them, you can use the onBeforeDataRender event handler.
You can see how it works in the following snippet:
http://snippet.dhtmlx.com/d1e692953

The onBeforeDataRender event fires when you repaint the data. The onBeforeGanttRender event fires when you initialize or reinitialize Gantt, resize the container size or apply some actions that might potentially resize the container.
The “data” in the event handler names means the task data. We have the event handlers that work with different elements of the grid and the timeline, but the event handlers with the “data” in the name don’t separate the grid and the timeline and related to the task data.

Here is the video that shows the difference between the onBeforeDataRender and onBeforeGanttRender event handlers:
https://files.dhtmlx.com/30d/580456180c220eb783b0b53449196eb7/vokoscreen-2019-07-23_13-25-26.avi

The onParse event works the same way as the onBeforeDataRender event, but it fires only when you use the gantt.parse command while the onBeforeDataRender event fires each time the data is rendered on the page.

The onBeforeGanttReady event fires before Gantt is initialized/reinitialized.
The onGanttReady event fires when the initialization/reinitialization actually happens:
http://snippet.dhtmlx.com/e0c429566

It works the same way for the onBeforeGanttRender and onDataRender events. The first one fires before the data is rendered, the second fires during the rendering.

The onGanttLayoutReady event fires when the layout is loaded, but before it is displayed. As the layout can be loaded and reloaded after initializing Gantt, that event fires only when you initialize or reinitialize Gantt.

The onBeforeTaskDisplay event fires for each task before Gantt shows the task row in the grid and the timeline.

#3

Hi @ramil,

Why was it that when I clicked on addTask (+) button, and save it, it will trigger onBeforeDataRender to run twice? [when lightbox opened, it will trigger once]

I noticed that I have to attach onGanttLayoutReady before I call gantt.init(), otherwise, it won’t be called.

Sounds like onBeforeDataRender could be closer to what I want. I don’t need to stop it, I just need to update some fields before I paint the data on the UI to be seen.

I have this simple example - http://snippet.dhtmlx.com/810b24916
I used onBeforeGanttRender to loop through all tasks, and update some stuff before I paint on the screen. But it seem to me that it will paint on the screen, update it, and repaint it again as you can see that it is obvious that the charts moved right after it first got painted. Is that supposed to be the behavior?

If that is the case, that would mean that I could only either

  1. live with it OR
  2. update all fields to the correct state before passing to gantt.parse() so that it can render correctly on initial parse

Is that right?

P.S is there a difference calling batchUpdate inside of onBeforeDataRender?

Thanks.

#4

Hello Joseph,

Why was it that when I clicked on addTask (+) button, and save it, it will trigger onBeforeDataRender to run twice? [when lightbox opened, it will trigger once]

When you click on the “Add” button, Gantt creates a new task with the addTask command, that creates a temporary task with some predefined parameters. That command requires repainting the changes.

If you click on the “Cancel” or “Delete” buttons, then the task will be deleted.
If you click on the “Save” button, there is the following sequence of events:

  1. Gantt saves the changes to an object.
  2. Gantt checks if it is a new task.
    • If it is a new task, Gantt removes the $new property. After that, Gantt uses the addTask command to create a task. As the IDs of the temporary task and the new task match, the temporary task will be replaced. But it requires repainting the changes.

• If the task is not “new”, Gantt updates the properties of the task and then updates the task.
3) Gantt uses the refreshData() to repaint the changes.

As you see, repainting happens 2 times for new tasks.

I have this simple example - http://snippet.dhtmlx.com/810b24916
I used onBeforeGanttRender to loop through all tasks, and update some stuff before I paint on the screen. But it seem to me that it will paint on the screen, update it, and repaint it again as you can see that it is obvious that the charts moved right after it first got painted. Is that supposed to be the behavior?

The order of the commands is important for Gantt. In the snippet, you attach the event after the tasks are loaded, so, it will update tasks only after the data is repainted. And another thing is that it will happen every time when the data is rendered if you use the onBeforeDataRender event handler.

update all fields to the correct state before passing to gantt.parse() so that it can render correctly on initial parse
Is that right?

Yes, for better performance, you can update the data before it is displayed. You can update the JSON variable before parsing it with the gantt.parse() command to make sure that all the data is changed.
Or you can change the data in the onParse event handler, but you need to put it before the gantt.parse command.

P.S is there a difference calling batchUpdate inside of onBeforeDataRender?

If you use the batchUpdate function, you will get more repaintings and more events will fire because of that.