Why drag and drop task very slow

Gantt
#1

why drag and drop task slow when load data more 5000 task form database my sqlGIF

#2

Hello Weerayut,
You shouldn’t have performance issues while dragging a task if you have the 6.2.x version with 5000 tasks. Here is an example:
http://snippet.dhtmlx.com/24de6b031
However, when you release the mouse button, Gantt might hang for a while because it needs to update all 5000 tasks.

If you use the additional task layer functionality, that might be related to the issue because the smart rendering doesn’t work for the additional layers. The dev team will add it in future versions.

Also, if you upgraded the 6.1.x or older version and added the smart rendering extension file, you need to remove it. Starting from the 6.2.0 version, the smart rendering is part of the dhtmlxgantt.js file. So, when you connect the old extension, it overwrites the performance improvements.

If that doesn’t help you, please reproduce the issue in the snippet, then click on the “Share” button and send me the link:
https://snippet.dhtmlx.com/3a7e741de
Or send me an HTML file with all the necessary Javascript and CSS files.

#3

thanks for answer
Can i show loading modal while updating all 5000 tasks :joy::joy:

#4

Hello Weerayut,
There is no built-in way to do that, you need to implement a custom solution.
First of all, you need to define after which events you want to show the modal. You can find more information about the events on the following page:
https://docs.dhtmlx.com/gantt/api__refs__gantt_events.html

Here is an example with the modal image that is displayed when Gantt loads tasks:
https://snippet.dhtmlx.com/d7ff5716f

#5

thanks for answer
I would like to update 1000 tasks. Can make it faster?

#6

Hello Weerayut,
You can use the batchUpdate method:
https://docs.dhtmlx.com/gantt/api__gantt_batchupdate.html
With that method, Gantt will repaint the changes only once instead of repainting the chart 1000 times. In the following snippet you can see how it works:
http://snippet.dhtmlx.com/5aa27d9b5
After clicking on the right button, the page hangs, while it works better if you click on the left button.

#8

batchUpdate very slow when update task and relate task on laravel mysql
are you have a way to make show loading dialog while wait update task ?
“https://drive.google.com/file/d/17ruceh6Ji52cseCk5S_L0gd4uSJSCfYa/view?usp=sharing”

#9

Hello Weerayut,
The batchUpdate method helps only on the client-side as it is related to repaintings. Unfortunately, there is no way to make it work the same way for the server-side, and there is no built-in feature to send several operations in one REST request. The dev team will add that feature in the future, but I cannot give you any ETA.
If you use the Data Processor, you can try changing its transaction mode to POST and specify the second parameter:

dp.setTransactionMode("POST", true);

https://docs.dhtmlx.com/api__dataprocessor_settransactionmode.html

#10

dp.setTransactionMode(“POST”, true); not working

1572834457887
1572834457887972×166 33.6 KB

#11

Hello Weerayut,
Do you mean that your server cannot work in the POST mode? Or you tried the POST mode and it doesn’t work? I see that there is the REST transaction mode on the screenshot.

#12

I tried the POST mode but it doesn’t work?
how to show model loading when wait update task ?

#13

Hello Weerayut,

can you please clarify how exactly it doesn’t work?
Do you have some kind of client-side error or a server-side error? Please clarify what the error is, or provide some kind of demo so we could follow.

Switching to POST mode would require changes in server-side code since it changes the format in which data is sent to the backend. Do you need help with that?

As for the modal loading dialog - you can display it using gantt.modalbox when the request is sent (dataProcessor onBeforeUpdate event), and hide it after the request is completed (onAfterUpdate).
When you have many requests sent sequentially, you’ll need to make sure you showing the modal when the first request is sent, and hiding it when the last one is completed.
https://docs.dhtmlx.com/gantt/desktop__message_boxes.html#modal
It can be done with a simple counter:

var dp = gantt.createDataProcessor({
	url: "/gantt/backend/data",
	mode: "REST"
});


var requestCounter = 0;
var modalId = null;
dp.attachEvent("onBeforeUpdate", function(){
	if(requestCounter === 0){// no requests are in progress
		modalId = gantt.modalbox({// show modal when the first request is sent
			text:"please wait while we're saving things"
		});
	}
	requestCounter++;// increase the counter of active requests
	return true;
});
dp.attachEvent("onAfterUpdate", function(){
	requestCounter--;// decrease the counter of active requests
	if(requestCounter === 0){// if no requests are in progress
		gantt.modalbox.hide(modalId);// hide the modal box
	}
});

Live demo: https://snippet.dhtmlx.com/6518c3395

1 Like
#14

thank you for your resspose