How to handle lazy loading and infinity scroll in Ember integration

Gantt
#1

I’m using Dhtmlx-gantt in ember and integrated using npm https://www.npmjs.com/package/dhtmlx-gantt

Two questions on my integration with Gantt.

First, I would like to handle large data say like 3000 to 4000.
Is there a way to have them load in the lazy mode for better performance?

Secondly, is it possible to automatically expand the Gantt Timeline view when scrolling to the most left/right?
In simple, I’m looking for some kind of infinity scrolling mechanism in the Gantt timeline instead of rendering the whole timeline.

#2

Hello Raju,

First, I would like to handle large data say like 3000 to 4000.
Is there a way to have them load in the lazy mode for better performance?

The most resource-consuming operations are related to the number of HTML elements Gantt has to render. Fortunately, with the performance improvements that are enabled by default, Gantt doesn’t render all timeline cells and grid rows. You can check the following examples and generate more tasks to see how it works:
https://docs.dhtmlx.com/gantt/samples/02_extensions/13_smart_rendering.html
https://docs.dhtmlx.com/gantt/samples/08_api/10_performance_tweaks.html

If you plan to load the data directly from the server-side, you can try using the branch_loading feature that works with the gantt.load method:
https://docs.dhtmlx.com/gantt/api__gantt_branch_loading_config.html
https://docs.dhtmlx.com/gantt/desktop__dynamic_loading.html
Here is an example of how it works:
http://docs.dhtmlx.com/gantt/snippet/2877d892

Another way to do that is to load only a certain amount of tasks. To load other tasks, you can use the gantt.parse method. Here is an example of the implementation:
https://snippet.dhtmlx.com/5/253d73f85

Secondly, is it possible to automatically expand the Gantt Timeline view when scrolling to the most left/right?
In simple, I’m looking for some kind of infinity scrolling mechanism in the Gantt timeline instead of rendering the whole timeline.

There is no built-in feature to expand the timeline when you scroll it, but you can implement it by using Gantt API and Javascript.
If the date range is not predefined by the gantt.config.start_date and gantt.config.end_date parameters, you can use the gantt.render() method to repaint the chart while dragging or resizing a task near the timeline border:
https://snippet.dhtmlx.com/5/9db277ac4
If the date range is predefined, you can extend it:
https://snippet.dhtmlx.com/69e9538a9

If you want to expand the timeline while clicking on the scrollbar buttons, here is another example of the implementation:
http://snippet.dhtmlx.com/5/d0a37d994

#3

Hello Ramil,

Thanks much for your response. It was really helpful.
One other query,
I would like to handle asynchronously each request from gantt.
My use case would be, user is making some click through’s in the gantt and currently for each click we make an update call. I would like to make these call asynchronously, in the sense I would like to consolidate all the click throughs and make a single save/update call.
Is there a way to achieve this functionality ?
Thanks for your response.

#4

Hello Raju,
Gantt is a client-side library, by default, it doesn’t send the changed to the server-side. You can only send the changes to the server by using the Data Processor:
https://docs.dhtmlx.com/gantt/desktop__server_side.html
https://docs.dhtmlx.com/api__refs__dataprocessor.html
Or by using the built-in Ajax module:
https://docs.dhtmlx.com/gantt/api__gantt_ajax_other.html

#5

Hi ramil,
Yes, i got that. Thanks.

I would like to make multiple changes from front-end to server via a single update call.
Is that possible in Gantt to capture multiple changes from UI and send them consolidated as a single request to server?

#6

Hello Raju,
If you use the Data Processor, Gantt can send all the changes at once only in the POST transaction mode:
https://docs.dhtmlx.com/api__dataprocessor_settransactionmode.html
It doesn’t work in all conditions, for example, auto-scheduled tasks are updated at once, but in a different request. So you might need to try to implement a custom solution:
http://snippet.dhtmlx.com/6cceb4a92
https://files.dhtmlx.com/30d/c78de8a00867049fbbb620faf4442ca5/save-button,-send-changes-at-once.avi

If you want to send it via AJAX, you also need to implement a custom solution. Here is an example of how it might be implemented:
https://snippet.dhtmlx.com/5/d0b0020f8