Spurious calls from Gantt's transport-update when async

1 Answer 71 Views
Gantt wrapper
Al
Top achievements
Rank 1
Iron
Iron
Iron
Al asked on 21 Jul 2021, 03:23 PM

I am sure this is somehow related to my post over here...anyway I am seeing duplicated calls to the custom handler, this time it is the update function and I have finally managed to simulate it in this stackblitz example.

Please run the sample then drag "Functional and Technical Specification" to above "Market Research" and then two updates are triggered as expected:

 

Now change the update function to look as below (to simulate async processing).

          tasksUpdate: function(options) {            
            console.log(`update!`, options.data.ID,  options)
            setTimeout(function() {
              options.success(options.data)
            },3000)            
          },

 

Then reload the sample and do the same dragging action ie. drag "Functional and Technical Specification" above "Market Research", now the updates are duplicated (two for every task):

As you can imagine, this fires off way more server calls than are necessary (double the amount) depending on which task is dragged to where.

Am I misunderstanding something here?

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 26 Jul 2021, 09:25 AM

Hi Al,

Thank you for the additional details. We've checked the described scenario again and what I can say is that the reported behavior is expected. Here is the description of why it is expected that when you have a setTimeout definition there are two requests. 

The way the Hierarchical DataSource of the Gantt works is that when you change the order of two tasks they are marked as "dirty", meaning that there are changes on them. When there are dirty fields in the dataSource(DS) and we want to update them in the backend the DS sends an update request to the backend and waits for the server response. If the response is successful, the "dirty" flag from the edited task is removed. This is what the DS does under the hood. 

In the scenario, with the timeout, we have two simulated update requests. At the time the first one completes the second one is still not completed. With the completion of the first request, because the second request is still not ready, the datasource sees that it still holds "dirty" fields and triggers the update method for a second time. This results in the behavior you experience. 

This is a scenario that should be handled by logic similar to the one you've shared in the other forum thread. Below I am passing the snippet I am talking about just in case someone finds this thread and needs a faster solution.

		dependRead: function(options) {
			
			console.log(`dependRead!`, options)

			this.$axios.get(................)
			.then((links)=> {
				options.success(links)
			})
			.catch((ex)=> {
				options.error(ex)
			})
               }

The described above scenario is handled internally by the DataSource when it doesn't use a custom function. When a custom function is used, we can't handle this asynchronous behavior because it is not triggered by a built-in functionality. 

I hope the above description is clear. Let me know if you have additional questions related to the current ticket. 

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Gantt wrapper
Asked by
Al
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Petar
Telerik team
Share this question
or