This is a migrated thread and some comments may be shown as answers.

Gantt dependency datasource with async handlers

8 Answers 35 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Iron
Iron
Veteran
Al asked on 25 Mar 2021, 10:29 AM

My Gantt config is like this:

 

<ganttdatasource ref="ganttdatasource1"
                        :transport-read="ganttRead"
                        :transport-update="ganttUpdate"
                        :transport-create="ganttCreate"
                        :transport-destroy="ganttDestroy"
                        :transport-parameter-map="parameterMap"                          
                        :transport-submit="ganttSubmit"
                        schema-model-id="id"
                        :schema-model-fields="fields"
>
</ganttdatasource>
 
<ganttdependencydatasource ref="ganttdependencydatasource1"
                        :transport-read="dependRead"
                        :transport-update="dependUpdate"
                        :transport-create="dependCreate"
                        :transport-destroy="dependDestroy"
                        :transport-parameter-map="parameterMap"
                        schema-model-id="id"
                        :schema-model-fields="dependencyFields"
>
</ganttdependencydatasource>
 
    <gantt
        ref="kendogantt"
        id="gantt"
        :height="500"
        :editable-create="true"        
        data-source-ref="ganttdatasource1"           
        dependencies-data-source-ref="ganttdependencydatasource1"
        :assignments="assignments"         
        :resources="resources"
    >
    </gantt>

 

Then methods:

methods: {
    dependRead: async function(options) {
        console.log("dependRead!", options)
        try {
 
            const links = await this.$axios.$get(................)
 
            options.success(links)
 
        } catch (ex) {
            options.error(ex)
        }          
    },

 

All works fine except that I get spurious calls to dependRead, in the console I see two or three logs for 'dependRead' every time the gantt loads.

If I remove the async/await code then I see only one call to dependRead as expected - so my question is, should I be using blocking or non-blocking handlers for this? async handlers are the correct approach by my thinking...

 

[Interestingly ganttRead uses exactly the same async mechanism but that is only ever called once]

8 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 30 Mar 2021, 10:28 AM

Hi Al,

Thank you for the provided details. Based only on the available details, we cannot say what is the reason why the dependRead method is called multiple times. 

We will take a deeper look at why the reported issue could be triggered. If you want to execute something after the remote data is available, I would recommend not using the async/await construction but use .then after the axios.get function. 

Let me know if using the .then method will resolve the issue in your application. Also, if you can provide a runnable example in which the issue can be replicated, this will be helpful for its faster resolution.

Looking forward to your reply.

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.

0
Al
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 31 Mar 2021, 06:12 AM

Hi Petar,

I tested .then instead of async/await and still I see dependRead firing multiple times.

0
Petar
Telerik team
answered on 01 Apr 2021, 12:05 PM

Hi Al,

Thank you for the feedback. To be able to furhter investigate the issue, we will need a runnable example in which it can be replicated.

Can you send us such an example? 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Al
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 06 Apr 2021, 07:30 AM

Could you please point me to a working stackblitz example using axios + custom function to read (instead of builtin transport url handling)?  I tried to do it myself but I could not get it working with your backend.

If you could make such an example then I will fork it and try to replicate the behaviour

0
Petar
Telerik team
answered on 09 Apr 2021, 07:09 AM

Hi Al,

I am afraid that we don't have such an example I can share with you. This is why I asked you about it. 

The way we recommend using the success callback function as in your code but without the async/await. What the success callback does is to notify the dataSource that the data request has completed successfully. Isn't it what you want to achieve?  Maybe the combination of the asynchronous axios.get and the callback function breaks somehow.  

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.

0
Al
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 20 Apr 2021, 08:21 AM

Hi Petar,

I get the duplicated calls to dependread when I use either async/await or .then ie. whenever the handler is asynchronous then it gives the problem.

I can get rid of the async handling as you recommend but surely it is normal to handle these asynchronously, I mean these calls to the backend could be slow?

0
Petar
Telerik team
answered on 23 Apr 2021, 08:02 AM

Hi Al,

What the success callback function does is similar to use async/await. You can check this StackOverflow post that describes the different approaches that can be used to implement asynchronous requests.

Check the end of the post and you will see that the async configuration of the $.ajax request is set to true by default. 

In the context of axios, what you can do is described in this example from their documentation. I am talking about this snippet:

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

I hope the above will help you resolve the issue. 

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.

0
Al
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 29 Apr 2021, 07:35 AM

Thanks Petar. I am ok with handling async responses, as you can see I have now removed the async keyword and using regular .then to handle the callback on 'options' and it works just fine.

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

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

 

The problem is when I do as above then dependRead is logged more than once (generally twice but I have seen 3 or more).

I am only concerned because it is doing more backend calls than are necessary, and this only happens for dependRead (ganttRead with the exact same code only makes one call), so it really looks like a bug to me.

 

Plamen
Telerik team
commented on 03 May 2021, 05:40 AM | edited

Hello,

Yes indeed, in such case you can use a non 'async' method for the 'dependRead' function because it created with this functionality inbuilt in it and is handling this asynchronous behavior internally.

As for the multiple time calling this method it sound unusual indeed - would you please elaborate when you see these multiple logs - is it initially or after some specific interactions with the component.

Regards,
Plamen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Al
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 03 May 2021, 07:10 AM

I see the multiple calls immediately when the gantt is loaded for the first time
Al
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 03 May 2021, 07:18 AM

<client-only>
<ganttdatasource ref="ganttdatasource1"
:transport-read="ganttRead"
:transport-update="ganttUpdate"
:transport-create="ganttCreate"
:transport-destroy="ganttDestroy"
:transport-parameter-map="parameterMap"
schema-model-id="id"
:schema-model-fields="fields"
>
</ganttdatasource>

<ganttdependencydatasource ref="ganttdependencydatasource1"
:transport-read="dependRead"
:transport-update="dependUpdate"
:transport-create="dependCreate"
:transport-destroy="dependDestroy"
:transport-parameter-map="parameterMap"
schema-model-id="id"
:schema-model-fields="dependencyFields"
>
</ganttdependencydatasource>

<gantt
ref="kendogantt"
id="gantt"
:height="500"
:editable-create="true"
data-source-ref="ganttdatasource1"
dependencies-data-source-ref="ganttdependencydatasource1"
:assignments="assignments"
:resources="resources"
@add="ganttAdd"
@edit="ganttEdit"
>
</gantt>
</client-only>
Plamen
Telerik team
commented on 06 May 2021, 05:08 AM

I have tried to simulate the issue in a sample stackblitz example but to no avail - at my side the event was always thrown once initially. I have used jQuery ajax for the fetching of the data but in this case we only need to return some data after some time so even a setTimeout will work for simulating the behavior.

Please review the example and let me know if there is anything else we could add in order to observe the unusual behavior.

Al
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 06 May 2021, 07:35 AM

When I use the exact same dependRead handler as your sample I get 2x calls.
I get it once when the Gantt first loads, and then again after the timeout (when options.success is called).
The only difference is that mine is a static/ssr nuxt app BUT I have wrapped all gantt components in <client-only> tags, and, logging 'process.server' in dependRead shows both of calls are being made on the client so it doesn't appear to be related to any server-side events.

I don't know what more to say, perhaps it is some side-effect of nuxt...but it is weird that I see this only on dependRead, taskRead does not have the problem.
Petar
Telerik team
commented on 11 May 2021, 06:40 AM

Hi Al.

I can't say if it is a side effect of NUXT but as far as we can't replicate it in a standard scenario we can't suggest an approach for resolving the reported issue. 

Tags
General Discussions
Asked by
Al
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Petar
Telerik team
Al
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or