Get the affected task after a task link has changes

Gantt
#1

Hi,

Like to know what’s the best way to know what is the affected task when a task link has been added, updated, or removed.

Currently, the onAfterLinkAdd, onAfterLinkUpdate, onAfterLinkDelete, only returns the link object and does not tell what is the task that is being affected. Looking more towards the affected source task, at the moment but will be great to know both source and target affected task.

Thanks.

Link - Receive another value at source and target
#2

Hello Joseph,
The link exists between 2 tasks, not the 1. So, when you add, update or delete a link, it might affect both tasks. The link object in the events you mentioned, already has the source and target task IDs.

Please, clarify what you want to do and how do you plan to use that functionality.

#3

Hi @ramil,

I may not be thinking straight previously but like to clarify a little more.

So the link object returns something like { id: '123', source: '1', target: '2', type: 0 }.
I haven’t tried out the APIs yet but what would the behavior be like.

I have task 1 and task 2. Task 1 is linked to Task 2 so if I drag the link from 1 to 2, it should create the link object as such { id: '123', source: '1', target: '2', type: 0 } right? which will also triggers onAfterLinkAdd event?
Would this onAfterLinkAdd the best place for me to perform a DB call to grab the unique id, and then call ChangeLinkId? or would it be onBeforeLinkAdd?

Now if I drag the same point from Task 1 to Task 3, it will trigger a onAfterLinkUpdate which will have the updated Link object? { id: '123', source: '1', target: '3', type: 0 }? or will it return the old object instead?

#5

Hello Joseph,

I have task 1 and task 2. Task 1 is linked to Task 2 so if I drag the link from 1 to 2, it should create the link object as such { id: ‘123’, source: ‘1’, target: ‘2’, type: 0 } right?

Right.

which will also triggers onAfterLinkAdd event?

Yes, it will trigger that event.

Would this onAfterLinkAdd the best place for me to perform a DB call to grab the unique id, and then call ChangeLinkId? or would it be onBeforeLinkAdd?

You can get the link ID in the onBeforeLinkAdd event and change the link ID there before the link is created. Here is the snippet that demonstrates how it works:
http://snippet.dhtmlx.com/da4af1440

The ChangeLinkId command can be used in the onAfterLinkAdd event handler as it modifies the existing link.

Now if I drag the same point from Task 1 to Task 3, it will trigger a onAfterLinkUpdate which will have the updated Link object? { id: ‘123’, source: ‘1’, target: ‘3’, type: 0 }? or will it return the old object instead?

You can create as many links as you want. But there is no built-in way to “reassign” existing links via drag and drop. So, if you start creating a link from Task #1, you will create a new link with the new ID and other parameters.

#6

Hi @ramil,

That’s nice. Does that work for onBeforeTaskAdd as well? I can intercept before task add, grab the unique id from DB then set the task.id?

In that case, when would it then trigger a onBeforeLinkUpdate and onAfterLinkUpdate event?
I need a reliable way to know when the link was updated via drag-and-drop. Anything you could suggest?

#7

Hello Joseph,

That’s nice. Does that work for onBeforeTaskAdd as well? I can intercept before task add, grab the unique id from DB then set the task.id?

It works the same way for adding tasks:
http://snippet.dhtmlx.com/014929cfe

However, please note, that the events are not asynchronous. You can make a call to the database before you even started creating the task (before the lightbox is opened) and apply the ID directly in the onBeforeTaskAdd and onBeforeLinkAdd event handlers. In that case, it will work the same way as in the snippet.
But if you want to make the request to the database in the event handler, it won’t change the task/link ID correctly. In the following snippet, you can create a new task, but you will get the error message after you click on any other task. It happens because the task id is modified after the task is added:
http://snippet.dhtmlx.com/5449ca8e3
In that case, you need to use the ChangeLinkId command in the onAfterLinkAdd and onAfterTaskAdd event handlers:
http://snippet.dhtmlx.com/b1220432c

In that case, when would it then trigger a onBeforeLinkUpdate and onAfterLinkUpdate event?
I need a reliable way to know when the link was updated via drag-and-drop. Anything you could suggest?

Those events will fire only when you use the updateLink command:
https://docs.dhtmlx.com/gantt/api__gantt_updatelink.html
There is no way to trigger those events directly via the user interface.

Even if you update the link lag via a modal box, you don’t update links manually, as the links are updated via the gantt.updateLink(link.id) command:
https://files.dhtmlx.com/30d/a20545c6f03a726e4be05a9333a0bad9/vokoscreen-2019-08-06_14-09-45.avi
http://snippet.dhtmlx.com/8d1677ebc

#8

Hi @ramil,

I see. I probably need to think through this. Still exploring some ideas.
Not sure if there is any difference, as I am not using Lightbox at all.
I have my own forms to create tasks, so I probably am going to perform my database create, wait for the result, then call addTask to add to gantt. Instead of addTask to gantt before database call. This way, I can control the id that is passed to addTask as well.

However, for links, I probably will not have my own drag-and-drop to create the link hence, I need to rely on gantt event to know when I can update the id for link after added.

gantt.attachEvent('onAfterLinkAdd', async (id, link) => {
  const { dbId } = await db.create(link);
  if (createInDbSuccess)
    gantt.change(id, dbId);
  else
    deleteGanttLink()
    notifyUserOfFailure()
});

Yeah, in that case, in order for user to “update the link”, user has to delete the existing one, then create a new one right? Because there is no way to update an existing link, right?
Your example calls the updateLink to actually update the lag and not the link of the source and target which is not what I want/need.

#9

Also, is there any snippet for addLinkLayer? Could you provide one? There isn’t a sample in the documentation page. And whether is it possible to have a toggle to show / hide the links.

#10

Hello Joseph,
Thank you for the clarification.

However, for links, I probably will not have my own drag-and-drop to create the link hence, I need to rely on gantt event to know when I can update the id for link after added.

If you want to rely on your events for links, you can return false in the onBeforeLinkAdd event handler so that the new link won’t be added. But in that event handler, you have the link object that you can use to manually create a new link after receiving the response from the server.
Here is the snippet that demonstrates how it works:
http://snippet.dhtmlx.com/4cd39cf3f

Yeah, in that case, in order for user to “update the link”, user has to delete the existing one, then create a new one right? Because there is no way to update an existing link, right?
Your example calls the updateLink to actually update the lag and not the link of the source and target which is not what I want/need.

If you want to have only one link from the task, then yes, you need to delete the link and create a new one. Or implement a custom solution to delete the existing link and create a new one.
Here is the snippet:
http://snippet.dhtmlx.com/fee9b5375

Also, is there any snippet for addLinkLayer? Could you provide one? There isn’t a sample in the documentation page. And whether is it possible to have a toggle to show / hide the links.

It works almost the same way as for tasks. However, the additional layer for links depends on the link node that is obtained after the link is displayed:
https://docs.dhtmlx.com/gantt/api__gantt_getlinknode.html
So, it is not convenient as the additional task layer. Here is the snippet:
http://snippet.dhtmlx.com/8eadb357b